D3 Line Chart изогнутые сегменты - PullRequest
Новая
       13

D3 Line Chart изогнутые сегменты

0 голосов
/ 04 июня 2019

Используя многолинейные графики в D3, я пытаюсь изменить свойства каждого сегмента линии (изменить цвет и ширину), применяя функцию interpolate (), которая изгибает линию.

Однако, когда я рисую линию, задавая координаты x1, y1 и x2, y2 (в отличие от линии (данных)), функция кривой не применяется.

Ниже приведен текущий код, который задает координаты 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)});

Спасибо!

1 Ответ

0 голосов
/ 10 июня 2019

У меня есть шанс покопаться немного глубже, и вот что я нашел.

Моя первая ошибка должна была быть очевидной.Когда я переключился с использования функции 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
    }
...