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

没有办法明确地告诉 d3 "take data from this attribute"。但是，您可以通过编程方式设置数据，从您选择的属性中加载它。有几种方法可以实现它，如这些选择示例所示（为简单起见，它们使用 <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>

Answer 2

现代浏览器接受 node().dataset

使用 D3_selection.node() 和 pure Javascript's DOM-node dataset property，正如@altocumulus 之前评论的那样。

它是 old Javascript standard for HTML elements（自 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>

D3 js 从数据属性设置数据

D3 js set data from data-attribute

javascript

selection

d3.js

现代浏览器接受 node().dataset

使用它