D3 JS установить данные из атрибута данных

Question

При создании графиков мне нужно установить данные. Эти данные (Массив объектов) у меня уже есть в HTML, как это:

<svg  class="graph-n" data-stuff="{simplified data}"></svg>

Затем с помощью Javascript и D3 JS я инициализирую и настраиваю графики с помощью следующего кода:

<script>
    var margin = { top: 20, right: 20, bottom: 30, left: 50},
        width = 1500 - margin.left - margin.right,
        height = 350 - margin.top - margin.bottom;

    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);


    var valueline = d3.line()
        .x(function(d) { return x(new Date(d.t)); })
        .y(function(d) { return y(d.y); });

    var svg = d3.selectAll(".graph-n")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        x.domain(d3.extent(data, function(d) { return new Date(d.t); }));
        y.domain([0, d3.max(data, function(d) { return d.y; })]);

        svg.append("path")
            .attr("class", "line")
            .attr("d", valueline);

        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        svg.append("g")
            .call(d3.axisLeft(y));
</script>

Вопрос в том, как мне сказать, что данные находятся внутри каждого элемента во время выбора в атрибуте данных «data-stuff»? Каждый SVG имеет данные для построения в своем собственном атрибуте данных.

Или мой подход неправильный, и я буду использовать другой подход?

Спасибо за ваши ответы.

Answer 1

Современные браузеры принимают node (). Набор данных

Использование D3_selection.node() и чистого DOM-узла Javascript набор данных свойство , как ранее прокомментировал @altocumulus.

Это старый стандарт Javascript для элементов HTML (начиная с Chorme 8 и Firefox 6), но новый для SVG (начиная с Chorme 55 и Firefox 51).

Значения ключей-значений набора данных являются чистыми строками, но рекомендуется использовать строковый формат JSON для нестроковых типов данных, чтобы проанализировать его как JSON.parse().

Используя это

Фрагмент кода для get и set наборов ключей-значений в HTML и SVG.

console.log("-- GET values --")
var x = d3.select("#html_example").node().dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)

var y = d3.select("#svg_example g").node().dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)

console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( d3.select("#svg_example").node().innerHTML )

<script src="https://d3js.org/d3.v5.min.js"></script>
<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello dataset!</p>
<svg id="svg_example">
  <g data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>

Answer 2

Невозможно просто сказать d3 явно: «взять данные из этого атрибута». Однако вы можете установить данные программно, загружая их из атрибута по вашему выбору. Есть несколько способов достижения этого, как показано на этих примерах выбора (для простоты они используют <ul> и <li>, <svg> - использование аналогично):

// the pure D3 way
d3.selectAll("ul.d3-pure")                // select the element
    .datum(function() { return this.getAttribute("data-list").split(",")}) // set selection's data based on its data attribute
    .selectAll("li")                      // create new selection
        .data((d) => d)                   // set the data from the parent element
        .enter().append("li")             // create missing elements
            .text((content) => content);  // set elements' contents

// the DOM way      
var domUls = document.querySelectorAll("ul.dom");     // select elements
for(var i = 0; i < domUls.length; i++) {              // iterate over those elements
    const ul = domUls[i];
    const d3_ul = d3.select(ul);                      // create D3 object from the node
    const data = ul.getAttribute("data-list").split(",");
    d3_ul.selectAll("li").data(data)                  // create new selection and assign its data
        .enter().append("li")                         // create missing elements
            .text((content) => content)               // set elements' content
}

// the hybrid D3-DOM way
d3.selectAll("ul.d3-hybrid")                // select elements
    .each(function() {                      // iterate over each node of the selection
        const ul = d3.select(this);         // "this" is the "ul" HTML node
        const data = ul.attr("data-list").split(",");
        ul.selectAll("li").data(data)       // create new selection, assign its data
            .enter().append("li")           // create missing elements
                .text((content) => content) // set elements' content
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<ul class="d3-pure" data-list="1,2,3">
</ul>
<ul class="dom" data-list="a,b,c">
</ul>
<ul class="d3-hybrid" data-list="I,II,III">
</ul>