StreamGraph в d3. js (v3) идет в Choppy - PullRequest
Новая
       5

StreamGraph в d3. js (v3) идет в Choppy

0 голосов
/ 18 февраля 2020

Я создаю потоковую диаграмму в d3. js версии 3, и моя потоковая диаграмма выглядит очень изменчивой.

Я использую следующий пример.

http://bl.ocks.org/WillTurman/4631136

Моя гипотеза состоит в том, что, хотя все мои даты для каждого индоссанта совпадают, причина для 'отбивной' состоит в том, что мой столбец даты не увеличивается линейно. В качестве примера 1/13/2020 будет иметь подтверждение A, B, C, D, E, F со значениями 1, 2, 0, 0, 4, 8, с повторением 1/13/2020 для каждой строки, однако вместо следующей даты, которая является 1/14/2020, она переходит к 19.01.2020 с подтверждением и значениями, имеющими соответствующие данные. Если это так, я предполагаю, что могу просто go и заполнить пропущенные даты соответственно, однако я не совсем уверен.

вот код: 

<div id="streamGraph"></div>

#streamGraph { 
 background: #fff;
}

.axis path, .axis line {
 fill: none;
 stroke: #000;
 stroke-width: 2px;
 shape-rendering: crispEdges;
}


chart("static/data/endorsements/endorsementsUpdated.csv", "blue");

var datearray = [];
var colorrange = [];

function chart(csvpath, color) {


if (color == "blue") {
 colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
}

strokecolor = colorrange[0];

var format = d3.time.format("%m/%d/%Y");

var margin = {top: 20, right: 40, bottom: 30, left: 30};
var width = 960;
var height = 400;

var x = d3.time.scale()
  .range([ 0, width ]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
//.ticks(d3.time.weeks);

var y = d3.scale.linear()
  .range([ height, 0 ]);


var yAxis = d3.svg.axis()
.scale(y);


var z = d3.scale.ordinal()
.range(colorrange);

var stack = d3.layout.stack()
.offset("silhouette")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.points; });


var nest = d3.nest()
.key(function(d) { return d.endorsee; });


var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select("#streamGraph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top 
+ margin.bottom))
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var graph = d3.csv(csvpath, function(data) {

data.forEach(function(d) {
d.date = format.parse(d.date);
d.endorsee = d.endorsee;
d.points =+d.points;
});

var layers = stack(nest.entries(data));

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);


svg.selectAll(".layer")
  .data(layers)
  .enter().append("path")
  .attr("class", "layer")
  .attr("d", function(d) { return area(d.values); })
  .style("fill", function(d, i) { return z(i); });


svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + width + ", 0)")
  .call(yAxis.orient("right"));


});
}

Вот фрагмент моих данных: 

date        endorsee      value

1/13/2020    A              3
1/13/2020    B              9
1/13/2020    C              0
1/13/2020    D              0
1/13/2020    E              1
1/13/2020    F              4
1/19/2020    A              0
1/19/2020    B              2
1/19/2020    C              4
1/19/2020    D              4
1/19/2020    E              0
1/19/2020    F              0

Любая помощь будет очень признательна.

...