6

我是一名设计师，刚开始玩一些 d3 教程，当然我只是在某个时候卡住了。我想知道在条形图中突出显示最大和较小列的最佳方式是什么。我希望它们的颜色不同，例如较小的“红色”代表最大的“绿色”。任何人都可以帮助我。

这是我到目前为止得到的：

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var t = 1297110663, // start time (seconds since epoch)
      v = 70, // start value (subscribers)
      data = d3.range(30).map(next); // starting dataset

  function next() {
    return {
      time: ++t,
      value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
    };
 }

setInterval(function() {
   data.shift();
   data.push(next());
   redraw();
}, 1500);

 var w = 11,
       h = 120;

 var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);

 var y = d3.scale.linear()
     .domain([0, 100])
     .range([0, h]);

 var chart = d3.select("body").append("svg")
     .attr("width", w * (data.length +3))
     .attr("height", h);

 chart.selectAll("rect")
     .data(data)
   .enter().append("rect")
     .attr("x", function(d, i) { return x(i) ; })
     .attr("y", function(d) { return h - y(d.value) - .5; })
     .attr("width", w)
     .attr("height", function(d) { return y(d.value); })
     .style("fill", "#ccc")
     .style("stroke", "white")

chart.select("rect")
    .style("fill", "red");

 chart.append("line")
     .attr("x1", 0)
     .attr("x2", w * (data.length))
     .attr("y1", h - .5)
     .attr("y2", h - .5)
     .style("stroke", "black");

</script>

提前谢谢了

4

1 回答 1

4

您可以使用：

d3.max(data, function(d) { return d.value; });

以及相应的d3.min函数来获取您的范围（还有d3.extent返回[min, max]）。

然后你可以说：

chart.select("rect")
  .filter(function(d) { return d.value === max; })
  .classed("max", true);

这会将max类添加到具有最大值的任何条形图。做同样的min事情，你就很好了。

此外，您应该保存您的选择，例如：

var bars = chart.selectAll("rect")
  .data(data);

//use later, like
bars.enter()...
bars.filter()...
于 2013-08-04T21:59:25.980 回答