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>

这是一个更完整的代码段，使用D3 transition设置SVG渐变的停止颜色。它比简单的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>

如何设置d3 SVG rect的背景类？

1 个答案: