计算与D3图形轴

时间:2016-06-27 17:37:40

标签: javascript d3.js

我有一个D3条形图如下:

enter image description here

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

.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相对应的高度?

1 个答案:

答案 0 :(得分: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));