Question

我有一个包含以下元素的页面：

<svg version="1.1" class="chart avg@i"  data-href='[{"name": "ken", "age": "40"}]'></svg>

......稍后

<svg version="1.1" class="chart avg@i"  data-href='[{"name": "Jen", "age": "40"}]'></svg>

我真正想要的是将这些数据放入图表中，这无疑是一张非常无聊的图表。所以为此我有：

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

所以我会得到两个图表（我的意思是，有更多d3的东西，但你明白了）。我想要的是用图表所用的特定元素中的href数据填充图表数据。

我该怎么做？要清楚，我想要一张“肯”图表和一张不同的“仁”图表。

Answer 1

根据我的理解，您希望从每个SVG收集data-href属性，并使用相同的数据在该SVG内创建图表。

希望此代码段有用。

var width = 200,
  height = 200,
  margin = {
    left: 5,
    right: 5,
    top: 5,
    bottom: 5
  };
var chart = d3.selectAll(".chart")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

chart.each(function() {
  var data = JSON.parse(d3.select(this.parentNode).attr("data-href"));
  d3.select(this)
    .selectAll("text")
    .data(data)
    .enter()
    .append("text")
    .attr("dy", function(d, i){ return (i+1)+"em" })
    .text(function(d) {
      return d.name
    });
});

svg {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg version="1.1" class="chart avg@i" data-href='[{"name": "ken", "age": "40"},{ "name": "Alan", "age": 15 }]'></svg>
<svg version="1.1" class="chart avg@i" data-href='[{"name": "Jen", "age": "40"}]'></svg>

如何访问d3元素dom数据？

1 个答案: