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

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

d3.js

D3.js-如何突出显示条形图中的最大和最小（最小和最大）列？,d3.js,bar-chart,D3.js,Bar Chart,我是一名设计师，刚开始玩弄一些d3教程，当然，我只是在某个时候被卡住了。我想知道在条形图中突出显示最大和较小列的最佳方法是什么。我希望它们在颜色上有所不同，如“红色”代表较小的颜色，“绿色”代表最大的颜色。任何人都可以帮我到目前为止，我得到的是： <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var t = 1297110663, // start t

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


var t=1297110663，//开始时间（自历元起的秒数）
v=70，//起始值（订户）
数据=d3.范围（30）.地图（下一个）；//启动数据集
函数next（）{
返回{
时间：++t，
值：v=~~Math.max（10，Math.min（90，v+10*（Math.random（）-.5）））
};
}
setInterval（函数（）{
data.shift（）；
data.push（next（））；
重画（）；
}, 1500);
var w=11，
h=120；
var x=d3.scale.linear（）
.domain（[0，1]）
.范围（[0，w]）；
变量y=d3.scale.linear（）
.domain（[01100]）
.范围（[0，h]）；
var chart=d3.选择（“主体”）.追加（“svg”）
.attr（“宽度”，w*（数据长度+3））
.attr（“高度”，h）；
图表。选择全部（“rect”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“x”，函数（d，i）{返回x（i）；}）
.attr（“y”，函数（d）{返回h-y（d.value）-.5；}）
.attr（“宽度”，w）
.attr（“高度”，函数（d）{返回y（d.value）；}）
.样式（“填充”、“ccc”）
.style（“笔划”、“白色”）
图表。选择（“rect”）
.样式（“填充”、“红色”）；
图表。追加（“行”）
.attr（“x1”，0）
.attr（“x2”，w*（数据长度））
.attr（“y1”，h-.5）
.attr（“y2”，h-.5）
.风格（“笔划”、“黑色”）；

非常感谢您可以使用：

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

谢谢@enjalot。因为你的评论，我才知道怎么做。我改变的一件事实际上是使用sellectAll（“rect”）而不是select（“rect”）。使用“选择”时，它仅在最大值和最小值位于第一个位置时才起作用<代码>var max=d3.max（数据，函数（d）{return d.value}）图表。选择全部（“rect”）.filter（函数（d）{return d.value==max}）。分类（“max”，true）。属性（“fill”，“green”）