d3 SVG rectの背景クラスを設定するにはどうすればよいですか？

Question

私はd3 v4を使用しています。私は折れ線グラフを持っています。私はチャートを転がして小さな情報ボックスを表示できます - https://jsfiddle.net/rgw12x8d/18/。現在、インフォボックスの背景が背景にグラデーションを持って、私が作成した特別クラス、私はそう

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

ように設定しかし、のは、私は背景がクラスにしたいとしましょうこれ、黄色..です。

.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 */ 
} 

フィルカラーの設定以外の情報ボックスの背景を正しく設定するにはどうすればよいですか？

Answer 1

SVGでグラデーションの背景のようなものを使用したい場合はできますが、SVG方法で行う必要があります。 SVGにはグラデーションがあり、CSSでそれらを適用できますが、SVGで定義する必要があります。一度それをしたら、CSSを使ってそれらを適用するか、:hoverなどでそれらを取り替えることができます。ここでは、D3で使いやすく、使いやすい超簡単な例があります。ここ

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>

」SVG勾配の停止カラーを設定するD3 transitionを使用して、より完全なスニペット。シンプルなCSSよりも少し難しいですが、非常に柔軟性があり、グラデーション間の伝統のようなCSSで簡単には得られないことをあなたに提供します。

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>