Диаграмма d3: как установить несколько свойств css для диаграммы d3

Question

svg.append("text")      
      .attr("x", width / 2 )
          .attr("y", 0)
          .style("text-anchor", "middle")
          .style("font-size",12)
          .text("Title of Diagram");

Я хотел использовать только один стиль и установить в нем все CSS свойства.

например,

.style (properties)

Answer 1

Вот пример, вы можете передать объект стиля в функцию .style() с помощью d3. js V3:

const width = 200;

const svg = d3.select('svg')
    .attr('width', '100%')
    .attr('viewBox', `0 0 ${width} ${width}`);
    

svg.append("text")      
    .attr("x", width / 2 )
    .attr("y", 0)
    .style({
      'alignment-baseline': "hanging",
      "text-anchor": "middle",
      "font-size": 12,
    })
    .text("Title of Diagram");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<svg>
</svg>

В V4 и V5 команда d3. js выделила эту так называемую функциональность 'd3-selection-multi' из основного дистрибутива, но вы все равно можете включить этот модуль и использовать его следующим образом:

Примечание: вам нужно изменить с .style() на .styles({...})

Примечание: этот модуль 'd3-selection-multi' также позволяет вам установить несколько атрибутов с объектом с .attrs({...})

Примечание: вы также можете комбинировать это с привязкой данных

const width = 200;

const svg = d3.select('svg')
    .attr('width', '100%')
    .attr('viewBox', `0 0 ${width} ${width}`);


svg.append("text")      
    .attrs({
      "x": width / 2,
      "y": 0
    })
    .styles({
      'alignment-baseline': "hanging",
      "text-anchor": "middle",
      "font-size": 12,
    })
    .text("Title of Diagram");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> -->
<script src="https://d3js.org/d3-selection-multi.v1.min.js">
</script>
<svg>
</svg>

Последний вариант - передать строку вашего стиля непосредственно в .attr(), но, конечно, это перезаписывает весь атрибут стиля вашей строкой, так что вы можете ' t используйте его дважды на одном элементе:

const width = 200;

const svg = d3.select('svg')
    .attr('width', '100%')
    .attr('viewBox', `0 0 ${width} ${width}`);


svg.append("text")      
    .attr('x', width / 2)
    .attr('y', 0)
    .attr('style',
      `alignment-baseline: hanging;
      text-anchor: middle;
      font-size: 12;`
    )
    .text("Title of Diagram");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
</svg>