Как добавить значения y0 и y1 в исходный источник в d3 version4? - PullRequest
Новая
       4

Как добавить значения y0 и y1 в исходный источник в d3 version4?

1 голос
/ 30 марта 2020

Я пытаюсь исправить код d3 v3 до версии v4.

Однако я столкнулся с огромной проблемой при исправлении стека (). Хотя в версии 3 есть функция magi c .out (), в версии 4 и более поздних версиях ее больше нет.

Причина, по которой я пытаюсь сделать «.out», заключается в том, что весь код написан вызов y0 и y1, которые находятся в «данных», на которые указывают все элементы d3 в коде.

Поэтому я думаю, что вставка значений y0 и y1 в исходные «данные» является наиболее эффективным способом исправить это.

См. Код ниже.
1) Исходный код 

function stackedArea() {
  var stack = d3.layout.stack()
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.price; })
      .out(function(d, y0, y) { d.price0 = y0; })
      .order("reverse");

  stack(symbols);

  y
      .domain([0, d3.max(symbols[0].values.map(function(d) {return d.price + d.price0; }))])
      .range([h, 0]);

  line
      .y(function(d) { return y(d.price0); });

  area
      .y0(function(d) { return y(d.price0); })
      .y1(function(d) { return y(d.price0 + d.price); });

  var t = svg.selectAll(".symbol").transition()
      .duration(duration)
      .attr("transform", "translate(0,0)")
      .each("end", function() { d3.select(this).attr("transform", null); });

  t.select("path.area")
      .attr("d", function(d) { return area(d.values); });

  t.select("path.line")
      .style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; })
      .attr("d", function(d) { return line(d.values); });

  t.select("text")
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; });

  setTimeout(streamgraph, duration + delay);
}

2) Фиксированный код 

      var stacked = d3.stack()
                    .keys(d3.range(123))
                    .value(function(d,key){return d.values[key].price})
                    .out(function(d, y0, y) { d.values[key].price = y0 })
                    (symbols)

Как вы могли видеть в Исходном коде, все элементы чертежа ссылаются на y0 и y1, которые находятся в исходной точке данных. Поэтому мне нужно добавить y0 и y1 в исходную точку данных старомодным способом, как в версии 3.

Пожалуйста, кто-нибудь, дайте мне знать, как это исправить ... Если у вас, ребята, есть лучший вариант Исправьте это, не стесняйтесь, дайте мне знать.

Оригинальный полный код находится по следующей ссылке.

https://jsfiddle.net/gqmbu79j/1/

...