Question

在D3中使用多折线图，我尝试在应用使曲线弯曲的interpolate（）函数的同时更改每个折线段的属性（更改颜色和宽度）。

但是，当我通过给出x1，y1和x2，y2坐标（与line（data）相对）来绘制直线时，不会应用曲线函数。

下面是指定行的x1，y1和x2，y2坐标的当前代码。这样我就可以更改每个线段的属性。

// Line deceleration

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.percent_change); });

// Construction of lines

payer.selectAll(“line”)
.data(function(d){return d.values})
.enter()
.append(‘line’)
.attr(“class”, “line”)
.attr(‘x1’, function(d) { return x(d.prev_x); })
.attr(‘y1’, function(d) { return y(d.prev_y); })
.attr(‘x2’, function(d) { return x(d.date); })
.attr(‘y2’, function(d) { return y(d.percent_change); })
.style(“stroke”, function(d) { if(d.prev_y>d.percent_change){return ‘#ffcccc’} else{return ‘#adebad’} })
.style(“stroke-width”, function(d) {return 100*Math.abs(d.percent_change)});

我现在遇到的问题是，我需要对线应用一条曲线，这应该使用interpolate（）函数（D3 v3）完成。在使用以下代码将可变路径宽度和颜色应用于每个线段之前，我能够做到这一点。

// Line deceleration

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.percent_change); })
.interpolate(“monotone”);

// Construction of Line

payer.append(“path”)
.attr(“class”, “line”)
.attr(“d”, function(d) { return line(d.values); })
.style(“stroke”, function(d) { return “#a6a6a6”; });

但是，既然我已经包含了使用所描述的代码来操纵线宽和颜色的功能，我看不到应用了线弯曲功能。如何使它具有弯曲的线，同时保持更改每个线段属性的能力？

当前实施：

// Line deceleration

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.percent_change); })
.interpolate(“monotone”); // Not being applied

// Construction of lines

payer.selectAll(“line”)
.data(function(d){return d.values})
.enter()
.append(‘line’)
.attr(“class”, “line”)
.attr(‘x1’, function(d) { return x(d.prev_x); })
.attr(‘y1’, function(d) { return y(d.prev_y); })
.attr(‘x2’, function(d) { return x(d.date); })
.attr(‘y2’, function(d) { return y(d.percent_change); })
.style(“stroke”, function(d) { if(d.prev_y>d.percent_change){return ‘#ffcccc’} else{return ‘#adebad’} })
.style(“stroke-width”, function(d) {return 100*Math.abs(d.percent_change)});

谢谢！

Answer 1

有机会更深入地挖掘，这就是我所发现的。

我的第一个错误应该很明显。当我从使用line（）切换到函数指定x1y1和x2y2坐标，因此插值算法为不再被呼叫。

要在要绘制的线条的每个线段上应用曲线，我找到了一种方法来指定 svg路径直接。这就是我的方法。


    // Line creation in D3

    var randomnumner = Math.floor(Math.random() * 10) + 1;
    payer.selectAll(“link”)
    .data(function(d){return d.values})
    .enter()
    .append(‘path’)
    .attr(“d”, function(d) {return curvedline(d)})
    .style(“stroke”, function(d) { if((d.prev_x>0 && d.percent_change<0) || (d.prev_x<0 && d.percent_change>0)) {
    return ‘url(#linear-gradient)’;
    } else {
    return ‘#cccccc’;
    }
    })
    .attr(“fill”, “none”)
    .attr(“stroke-width”, function() {return randomNumGen()});

    // Draw SVG curved line. M defines the starting point and C denotes a cubic bezier curve.

    function curvedline(d) {

    return “M” + x(d.prev_x) + “,” + y(d.prev_y) // starting point // this section (and the one above) is drawing M=moveto command of svg path
    + “C” + x(d.prev_x+(d.prev_x – d.percent_change)/10) + “,” + y(mid_date2) //control point 1 // C curveto command of svg path
    + ” ” + x(d.percent_change+(d.prev_x – d.percent_change)/10) + “,” + y(mid_date1)
    + ” ” + x(d.percent_change) + “,” + y(d.date); //ending point
    }

D3折线图曲线段

1 个答案: