Что делает Null, когда он вставляется в функцию атрибута в d3? - PullRequest
Новая
       7

Что делает Null, когда он вставляется в функцию атрибута в d3?

2 голосов
/ 29 марта 2020

Я столкнулся со странным аргументом, которого я не видел. В этом коде он помещает 'null' в атрибут, и я думаю, что этот null делает то, что получает, когда функция объединена в цепочку с другими.

1) Я хочу спросить вас, ребята, что NULL делает. (где ноль находится в коде ниже) 

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) Я предполагаю, переменная t написана, чтобы избежать повторяющихся аргументов преобразования. Тем не менее, я не понимаю порядок аргументации. Поскольку я думаю, это должно быть написано в следующем порядке.

svg.selectAll ('. Symbol'). Select ('path.area'). Attr ('d', function (d) {return area (d.values);}) .transition (). duration (duration) .attr ('transform', 'translate (0,0)') ....

Однако Согласно var t, select ('path.area') следует после перехода и продолжительности и даже после .each.

3) Последний вопрос, Для версий 4 и 5. каждый («конец» ...) должен быть .on («конец» .... верно?

1 Ответ

2 голосов
/ 29 марта 2020

Прежде всего, пожалуйста, оставьте только одну проблему на вопрос здесь, в переполнении стека.

Что касается null, API объясняет это:

Нулевое значение удалит указанный атрибут.

Это относится к другим методам, таким как style().

В этом примере круг имеет CSS цвет («красный»). Код D3 устанавливает другой цвет («зеленый»), и null возвращается к исходному цвету CSS. 

const circle = d3.select("circle");
let i = 0;
setInterval(function() {
  circle.style("fill", (++i) % 2 ? "green" : null);
}, 1000)
circle {
  fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <circle r="50" cx="100" cy="75"></circle>
</svg>
...