Wie lege ich die Hintergrundklasse meines d3 SVG rect fest?

Question

Ich benutze d3 v4. Ich habe ein Liniendiagramm, in dem ich über mein Diagramm rollen kann und eine kleine Info-Box erscheint - https://jsfiddle.net/rgw12x8d/18/. Zur Zeit der Hintergrund der Info-Box ist gelb, die ich wie so

var rect = focus.append("rect") 
    .attr("x", 9) 
    .attr("dy", ".35em") 
    .attr("fill", "yellow"); 

gesetzt Aber lassen Sie uns sagen, dass ich den Hintergrund wollen eine Klasse sein, und zwar eine Klasse habe ich erstellt, die einen Gradienten als Hintergrund hat .. .

.infoBoxBg { 
    background: #4c4c4c; /* Old browsers */ 
    background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */ 
} 

Wie kann ich richtig den Hintergrund meiner Info-Box andere als die Füllfarbe einstellen?

Answer 1

Wenn Sie Dinge wie Gradienten Hintergründe mit SVG verwenden möchten, können Sie, aber Sie müssen es tun, die SVG-Art. SVG hat Gradienten und Sie können sie in CSS anwenden, aber Sie müssen sie in SVG definieren. Sobald Sie das getan haben, können Sie CSS verwenden, um sie anzuwenden, oder tauschen Sie sie mit :hover usw. aus. Hier ist ein super-einfaches Beispiel, das helfen könnte und sollte einfach mit D3 zu verwenden.

rect.rec { 
 
     fill: url("#grad"); 
 
    } 
 
    rect.rec:hover { 
 
     fill: url("#grad_rev") 
 
    }

<div> 
 

 
    <svg width="200", height="200"> 
 
    <defs> 
 
    <linearGradient id="grad"> 
 
     <stop offset="5%" stop-color="#d33" /> 
 
     <stop offset="95%" stop-color="#100" /> 
 
    </linearGradient> 
 
    <linearGradient id="grad_rev"> 
 
     <stop offset="5%" stop-color="#100" /> 
 
     <stop offset="95%" stop-color="#d33" /> 
 
     </linearGradient> 
 
    </defs> 
 
    <rect class="rec" width="100", height="100"> 
 
    
 
    </rect> 
 
    </svg> 
 

 
</div>

Hier ein vollständigere Schnipsel eines D3 mit transition den Stopp Farbe auf den SVG-Gradienten einzustellen. Es ist ein wenig schwieriger als einfaches CSS, aber sehr flexibel und gibt dir Dinge, die du nicht leicht mit CSS erreichen kannst, wie Traditionen zwischen Farbverläufen.

var margin = {top: 20, right: 30, bottom: 30, left: 40},   
 
     width = 200 - margin.left - margin.right, 
 
     height = 200 - margin.top - margin.bottom, 
 
     padding = 0.3; 
 

 
    var chart = d3.select(".chart") 
 
     .attr("width", width + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 
    
 
    chart.append("rect") 
 
     .attr("class", "rec") 
 
     .attr("height", "150px") 
 
     .attr("width", "150px") 
 
     .on("mouseover", handleMouseOver) 
 
     .on("mouseout", handleMouseOut) 
 

 
    function handleMouseOver(d, i){ 
 
     d3.select('#red-stop') 
 
     .transition() 
 
     .duration(600) 
 
     .attr('stop-color', 'blue') 
 
    } 
 
    function handleMouseOut(d, i){ 
 
     d3.select('#red-stop') 
 
     .transition() 
 
     .duration(600) 
 
     .attr('stop-color', 'red') 
 
    }

 rect.rec { 
 
      fill: url("#grad"); 
 
     }

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg class="chart"> 
 
    <linearGradient id="grad"> 
 
     <stop id="red-stop" offset="5%" stop-color="red" /> 
 
     <stop offset="95%" stop-color="#100" /> 
 
    </linearGradient> 
 
    <linearGradient id="grad_rev"> 
 
     <stop offset="5%" stop-color="#100" /> 
 
     <stop offset="95%" stop-color="#d33" /> 
 
    </linearGradient> 
 
      
 
    </svg>