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>

问题是我怎么说，数据在数据属性的选择过程中，每个元素内部都有数据＆＃39; data-stuff＆＃39; ？每个SVG都有数据可以在他自己的数据属性中绘制。

或者我的方法是错误的，我将使用不同的方法？

感谢您的回复。

Answer 1

没有办法明确地告诉d3＆＃34;从这个属性获取数据＆＃34;。但是，您可以以编程方式设置数据，从您选择的属性中加载数据。有几种方法可以实现它，正如这些选择示例所示（为简单起见，它们使用<ul>和<li>，<svg>用法类似）：

＆＃13;

// 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
        });

＆＃13;

<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>

＆＃13;

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()进行解析。

使用

HTML和SVG的 get 和 set 键值数据集的代码段。

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从data-attribute设置数据

2 个答案:

现代浏览器接受node（）。dataset

使用