Question

考虑jsfiddle链接http://jsfiddle.net/5D5eD/5/。它有数据值[2,2]，[3,3]，[4,4]，[5,4]，[5.5,5]，[6,6]，[6,7]，[5,6] ]。在这个例子中，最后两个值是[6,7]和[5,6]。我想添加一个条件，即如果y值小于先前的值，则数据点应该将y值增加1个单位。在我的情况下，[6,7]到[5,6]的行应该用[6,7]到[5,8]中的一行代替。如何在代码中实现这一点？

 var line = d3.svg.line()
 .x(function(d){return x(d[0]);})
  .y(function(d){return y(d[1]);})
 .interpolate("linear");  

   g.append("path")
  .attr("d", function(d) { return line(data)})
  .attr("transform", "translate(0,0)")
   .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
   // end of drawing lines

       main.append("g")
   .attr("class", "grid")
   .attr("transform", "translate(0," + height + ")")
   .call(make_x_axis()
   .tickSize(-height, 0, 0)
   .tickFormat(""))

    main.append("g")
   .attr("class", "grid")
   .call(make_y_axis()
   .tickSize(-width, 0, 0)
   .tickFormat(""))

    function make_x_axis() {
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
     .ticks(30)
     }

    function make_y_axis() {
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(17)
    }

Answer 1

请参阅此FIDDLE。我想这就是你想要的。

var py;
data.map(
    function(d) {
        if (d[1] < py)
            d[1] = py + 1;
        py = d[1];
    }
);

Answer 2

不知道比这更有效的方法，但它符合你的要求。

使用条件在绘制圆和线中返回y轴值：

(i>0 && d[1]<data[i-1][1]) ? y(data[i-1][1]) : y(d[1]); (where i is index from function(d, i) { ... })

以下两行改变了：

// Drawing circles
g.selectAll("scatter-dots")
.data(data)
    .enter().append("svg:circle")
    .attr("cx", function (d, i) {  return x(d[0]); }) 
    .attr("cy", function (d, i) { return (i>0 && d[1]<data[i-1][1]) ? y(data[i-1][1]) : y(d[1]); }) 
    .attr("r", 5)
    .style("fill", function (d) { return color(d[0]);}) ;

// begin of drawing lines
var line = d3.svg.line()
    .x(function(d){return x(d[0]);})
.y(function(d, i){ return (i>0 && d[1]<data[i-1][1]) ? y(data[i-1][1]) : y(d[1]); })
    .interpolate("linear");

<强> Updated Fiddle DEMO

如何在我的d3js示例中添加if条件

2 个答案: