javascript D3 V6, борющийся с цепным синтаксисом, в частности с эффектами '.call' и 'selectAll'

Ниже приведены два примера аналогичного кода D3, один работает, а другой нет. В этом примере я хочу изменить цвет линий оси -

Это не работает, цвет обводки оси не меняется на зеленый -

   var x_axis = svg.append("g")
      .attr("class", "axis")
      .attr("transform", `translate(20, ${height - 50})`)
      .call(d3.axisBottom(ordinalScale))
         .selectAll("text")
         .attr("transform", "translate(-5,5)rotate(-45)")
         .style("text-anchor", "end")
         .style("font-size", "8px")
         .style("fill", "#102040");

   x_axis.selectAll("line, path").style("stroke", "green");

НО это работает, линии меняются на зеленый:

   var x_axis = svg.append("g")
      .attr("class", "axis")
      .attr("transform", `translate(20, ${height - 50})`)
      .call(d3.axisBottom(ordinalScale));

   x_axis.selectAll("text")
      .attr("transform", "translate(-5,5)rotate(-45)")
      .style("text-anchor", "end")
      .style("font-size", "8px")
      .style("fill", "#102040");

   x_axis.selectAll("line, path").style("stroke", "green");

Разница в том, что в первом (неудачном) примере я привязываю операции selectAll (text) к call (d3.axisBottom) с операциями selectAll (line, path) в следующем выражении и в Во втором (успешном) примере у меня есть следующие отдельные выражения для каждой операции с текстом и строкой / путем.

Это не критично, так как я могу получить желаемый эффект, но мне кажется, что они должны быть эквивалентными, но, очевидно, есть некоторая тонкость синтаксиса, которую я не понимаю. Связано ли это с операцией '.call'?


javascript d3.js selectall
person CJH    schedule 13.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Первый блок кода не работает, потому что x_axis не содержит того, что, по вашему мнению, он делает.

  var x_axis = svg.append("g")   // returns a selection of a g element
     .attr("class", "axis")      // returns the same selection of a g
     ...
     .call(d3.axisBottom(ordinalScale)) // returns the same selection of a g
     .selectAll("text")                 // returns a new selection of text elements
     ...                                
     .style("fill", "#102040");         // returns the same selection of text elements

x_axis определяется последним значением, возвращаемым цепочкой. Итак, x_axis в приведенном выше примере - это выбор текстовых элементов, текстовые элементы не могут (и в данном случае не содержат) какие-либо дочерние элементы пути или строки, поэтому x_axis.selectAll('line, path') вернет пустой выбор. Следовательно, установка какого-либо свойства для пустого выделения ничего не изменит.

Второй блок кода работает, потому что x_axis остается выбором g - selection.call() возвращает тот же selection, к которому был привязан .call(), например, .attr() или .style(), среди других методов. В то время как selectAll() и select(), среди других методов, возвращают новые выборки.

person Andrew Reid    schedule 13.10.2020