d3从svg元素选择数据 [英] d3 Selecting data from an svg element

问题描述

在我的d3代码中选择g元素时遇到问题，无法弄清楚该怎么做.

Having a problem in selecting the g elements in my d3 code and can't figure out how to do it.

代码

var vis = d3.select("#custom-view").append('svg:svg').attr('width', w).attr('height', h);

d3.range(lengthJson).forEach(function (t) {
         vis.append("g")
         .attr('width', wBlob)
         .attr('height', hBlob);

          return t

});

var blobs = **tried numerous things here**.selectAll('g').data(graph.nodes)
        .enter()
        .append('rect')
        (....do a lot more code...)

问题

上面描述的代码根据JSON文件的长度将元素添加到元素中.然后，我希望它向其中的每个元素附加元素.

The code depicted above adds elements into the element depending on the length of the JSON file. Then I want it to append elements to each element inside that.

我尝试过的事情

试图将其声明为变量

var gCode = vis.append("g")

如果在制作g元素时未将其包装在forEach函数中，则可以使用

which works if it is not wrapped in the forEach function when making the g elements

我试图在属性中分配一个类，并通过所有g元素进行选择.

I tried to assign a class in the attribute and select by all the g elements that way.

还尝试给svg元素一个ID并以此方式选择它，但是没有运气

Also tried giving the svg element an ID and selecting it that way but no luck

推荐答案

请勿不要使用循环，例如forEach，将元素添加到D3代码中.

Do not use loops, like forEach, to append elements in a D3 code.

当然，我们一直在D3代码中使用循环(for循环，for...in循环，forEach循环等...)，因为D3是JavaScript ...但是我们不使用循环以添加元素，这不是惯用的方式.最终，我们使用循环来添加元素，但是在非常特殊且罕见的情况下.

Of course we use loops (for loops, for...in loops, forEach loops etc...) all the time in a D3 code, since D3 is JavaScript... but we don't use a loop to append elements, that's not the idiomatic way. Eventually we use loops to append elements, but in very specific and rare cases.

使用循环在D3代码中附加元素不仅很尴尬，而且有时还会使您处于没有(简单)解决方案的情况.像这样的人.

Using loops to append elements in a D3 code is not only awkward, but sometimes it will put you in a situation without (an easy) solution. Like this one.

您的习惯用法是嵌套输入选择.

因此，根据数据集的长度，使用enter选择来添加组，然后使用内部enter选择来添加矩形或所需的任何元素.

So, use an enter selection to append your groups, based on the length of your data set, and then use an inner enter selection to append your rectangles, or whatever element you want.

这是一个非常基本的示例，使用<div> s和<tspan> s:

Here is a very basic example, using <div>s and <tspan>s:

var data = ["foo", "bar", "baz"];
var body = d3.select("body");
var colors = d3.scaleOrdinal(d3.schemeCategory10)
var divs = body.selectAll(null)
  .data(d3.range(data.length))
  .enter()
  .append("div")
  .style("background-color", function(d) {
    return colors(d)
  });
var texts = divs.selectAll(null)
  .data(data)
  .enter()
  .append("tspan")
  .text(function(d) {
    return d + " "
  })

<script src="https://d3js.org/d3.v4.min.js"></script>

在上面的演示中，data数组包含3个元素.因此，第一个(或外部)输入选择将在体内附加3个div.

In the demo above, the data array has 3 elements. Thus, the first (or outer) enter selection will append 3 divs in the body.

然后，第二个(内部)选择将为每个div追加数据数组中的3个元素.

Then, the second (inner) selection will append, for each div, the 3 elements in the data array.

这篇关于d3从svg元素选择数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！