计算与 D3 图轴上的值对应的像素高度答案

【问题标题】：Calculate the height in pixels that corresponds to a value on the axis of D3 graph计算与 D3 图轴上的值对应的像素高度
【发布时间】：2016-06-28 01:53:37
【问题描述】：

我有一个 D3 条形图如下：

我想将通过水平线的条形着色为绿色。我可以这样做：

.attr("fill", function(d) { return (d.the_value > 0.65 ? "green" : "orange"); })

效果很好。但是水平条本身的高度是使用绘图的高度设置的。

    svg.append("line")         
    .style("stroke", "black")  
    .attr("x1", 0)     
    .attr("y1", height/2)    
    .attr("x2", 600)
    .attr("y2", height/2);

我想使用值 0.65 来设置水平条的高度。如何获得对应于轴上 0.65 的像素高度？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我想你的代码中有类似的东西

yScale = d3.scale()
  .domain(...)
  .range([0, 600])

并且您可以使用它来调整条形的大小和位置。

使用该比例，您可以在使用yScale(0.65) 后获得 y 坐标。即：

svg.append("line")         
.style("stroke", "black")  
.attr("x1", 0)     
.attr("y1", yScale(0.65))    
.attr("x2", 600)
.attr("y2", yScale(0.65));

【讨论】：