Question

我是一名设计师刚刚开始愚弄一些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>

非常感谢提前

Answer 1

您可以使用：

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()...

D3.js - 如何突出显示条形图中的最大和最小（最小和最大）列？

1 个答案: