D3.js 用条件画法画线的正确方法是什么

我随身带着3个数据。每个数据都有不同的值。使用数据

size

我在画线

我的要求是，如何添加每个值的条件，以不同的方式绘制线

例如，在我的例子中，第二个数据需要从右向左绘制，而不是从左向右绘制

正确的方法是什么

var高度=500；
var宽度=500；
风险值数据=[
{“name”：“name1”，“size”：10，“count”：8}，
{“name”：“name2”，“size”：20，“count”：20}，
{“name”：“name3”，“size”：30，“count”：60}
]
var svg=d3.select（'body'）.append（'svg'）.attr({
宽度：宽度，
高度：高度
}).append（'g'）；
var line=svg.selectAll（'line'）
.数据（数据）
.输入（）
.append（'行'）
.style（“笔划”、“黑色”）
.attr（“x1”，函数（d）{10}）
.attr（“y1”，函数（d）{返回d.size}）
.attr（'x2'，函数（d）{返回0}）
.attr（“y2”，函数（d）{返回d.size}）
.transition（）
.延迟（2000年）
.期限（2000年）
.attr（“x2”，函数（d）{返回宽度-d.size}）

---

只需在绘图函数中插入一个复选框即可

function(d){ 
  if(d.name === "name2")
    // code to draw right to left
  else
    // code to draw left to right
}

或者，如果您喜欢使用索引

function(d, i){
  if(i === 1)
    // code to draw right to left
  else
    // code to draw left to right
}

如果您的逻辑影响到

x1

、

x2

、

y1

和

y2

，那么在

中执行所有操作可能会更容易。每个
调用：

var line = svg.selectAll('line')
          .data( data )
          .enter()
          .append('line')
          .style("stroke", "black")
          .each(function(d, i){
             // custom logic here to decide what's x1, x2, y1, y2
             // based on d and i
             d3.select(this){
               .attr("x1", ...)
               .attr("y1", ...)
               .attr('x2', ...)
               .attr("y2", ...)
               // etc
           });

如果你不介意的话，我还有一个问题要问你，在这个图表中-我如何防止在顶部和右侧画绿线？我只需要左下角。你能再解释一下吗？我在图表中没有看到任何绿线。。。