Question

我有3个数据。每个数据都有不同的值。使用数据size我画线。

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

例如我的情况，第二个数据需要从右到左绘制，而不是从左到右绘制。

这样做的正确方法是什么？

var height = 500;
  var width = 500;
  
  var data = [
      {"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({
    width:width,
    height:height
  }).append('g');
  
  var line = svg.selectAll('line')
              .data( data )
              .enter()
              .append('line')
              .style("stroke", "black")
              .attr("x1", function(d){ 10  })
              .attr("y1",  function(d){ return d.size })
              .attr('x2', function(d) { return 0 })
              .attr("y2", function (d){ return d.size })
              .transition()
              .delay(2000)
              .duration(2000)
              .attr("x2", function (d){ return width - d.size })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

只需在绘图功能中插入支票即可。

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，那么在.each电话中执行所有操作可能更容易：< / p>

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
           });

通过条件绘制线条方向的正确方法是什么

1 个答案: