文章/答案/技术大牛

发布

社区首页 >问答首页 >外部selectAll:选择了什么？

问外部selectAll:选择了什么？
EN

Stack Overflow用户

提问于 2012-09-24 00:57:56

回答 2查看 532关注 0票数 2

我正在学习D3，以及如何使用D3的数据绑定机制将元素嵌套或附加到页面。

我修改了在http://www.recursion.org/d3-for-mere-mortals/上找到的代码。我了解如何设置svg画布，还了解将数据绑定到rect、text和line元素的循环。

我不明白的是下面对selectAll('Anything1/2/3/4')的调用。它们显然是必要的，但我究竟选择了什么，以及它们如何适应数据绑定机制？谢谢。

    <html>
    <head>
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v2.js"></script>
    </head>
    <body>

        <script type="text/javascript">

var dat = [ { title:"A", subtitle:"a", year: 2006, books: 54, avg:10 },
            { title:"B", subtitle:"b", year: 2007, books: 43, avg:10 },
            { title:"C", subtitle:"c", year: 2008, books: 41, avg:10 },
            { title:"D", subtitle:"d", year: 2009, books: 44, avg:10 },
            { title:"E", subtitle:"e", year: 2010, books: 35, avg:10 } ];

var width    = 560,
    height   = 500,
    margin   = 20,
    innerBarWidth =  20,
    outerBarWidth =  40;


var x = d3.scale.linear().domain([0, dat.length]).range([0, width]);
var y = d3.scale.linear()
    .range([0, height - 2 * margin])
    .domain([ 0 , 100 ]);

var z = d3.scale.category10();

var n = d3.format(",d"),
    p = d3.format("%");

var canvas = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + 2 * margin + "," + margin + ")");

// outerbars
var outerBars = d3.select("svg")
  .selectAll("Anything1").data(dat).enter().append("rect")
  .attr("x", function(datum, index) { return x(index); })
  .attr("y", function(datum) { return height - y(datum.books); })
  .attr("height", function(datum) { return y(datum.books); })
  .attr("width", outerBarWidth)
  .attr("fill", "blue")

// innerbars
var innterBars = d3.select("svg")
  .selectAll("Anything2").data(dat).enter().append("rect")
  .attr("x", function(datum, index) { return x(index)+innerBarWidth/2; })
  .attr("y", function(datum) { return height - y(datum.books)/2; })
  .attr("height", function(datum) { return y(datum.books); })
  .attr("width", innerBarWidth)
  .attr("fill", "red");

// avg references
var barlabels = d3.select("svg")
  .selectAll("Anything3").data(dat).enter().append("line")
  .attr("x1", function(datum, index) { return x(index); })
  .attr("x2", function(datum, index) { return x(index)+outerBarWidth; })
  .attr("y1", function(datum) { return height - y(datum.books)/2; })
  .attr("y2", function(datum) { return height - y(datum.books)/2; })
  .style("stroke", "#ccc");

// titles
var barlabels = d3.select("svg")
  .selectAll("Anything4").data(dat).enter().append("text")
  .attr("x", function(datum, index) { return x(index)+innerBarWidth/2; })
  .attr("y", height )
  .attr("text-anchor", "end")
  .text(function (d) {return d.title} );

        </script>
    </body>
</html>

javascript

svg

d3.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-25 05:37:16

也许在d3中最重要但也是最难理解的概念是selection (我强烈建议您将其加入书签并熟悉它)。从表面上看，选择提供了与许多其他JavaScript库类似的功能，例如jQuery：

jQuery：

var paragraphs = $("p");

d3：

var paragraphs = d3.selectAll("p");

这两行代码都创建了“选择对象”，这些对象本质上是DOM元素，它们被组合成一个对象，使您能够更好地控制这些元素。与其他库一样，您可以使用库中提供的函数在d3中操作这些“选定的”元素。

jQuery：

var paragraphs = $("p").css("color", "red");

d3：

var paragraphs = d3.selectAll("p").style("color", "red");

同样，从表面上看，这是相当容易理解的。d3之所以如此强大，是因为它让您可以通过allowing you to bind arbitrary data to the selected elements.进一步实现这一点

假设您有一个空白文档，您想要添加几段文本-并且您将每个文本段落存储在一个数组中的单个元素中：

var text = ["First", "Second", "Third", "Fourth"];

因为我们还没有创建这些段落，所以下面的调用将返回一个empty selection

var paragraphs = d3.selectAll("p");
console.log(paragraphs.empty()); // true

请注意，paragraphs仍然是一个选择，只是它是空的。这是d3中的一个基本点。可以将数据绑定到空选定内容，然后使用该数据通过entering selection添加新元素。让我们从前面的示例开始，逐步完成这个过程。首先，创建空选择并将text数组绑定到它：

var paragraphs = d3.select("body").selectAll("p").data(text);

然后，使用输入选择，将<p>元素附加到正文：

paragraphs.enter().append("p").text(function(d) { return d; });

您的DOM现在将具有：

<body>
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
</body>

在这一点上，有很多东西肯定会让你感到困惑，但我认为这应该会给你一个好的开始。

另请参阅：Thinking with Joins。

票数 3

Stack Overflow用户

发布于 2012-09-24 08:49:46

这里有一些读物可以让你入门：

Understanding selectAll, data, enter, append sequence

Binding Data: Scott Murray D3 Tutorials

从第二个链接可以看出：

答案在于

()，一个真正神奇的方法。下面是本例的最后一段代码，我将对其进行解释：

D3select(“body”).selectAll(“p”) .data(dataset) .enter() .append("p") .text(“新段落！”)；

.selectAll("p") -选择DOM中的所有段落。因为还不存在，所以这将返回一个空选择。把这个空的选择看作是代表即将存在的段落。

基本上，您选择了尚不存在的DOM元素，然后将数据添加到这些不存在的元素中，然后在绑定数据之后再添加它们。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12554274

复制

相似问题

问外部selectAll:选择了什么？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问外部selectAll:选择了什么？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问外部selectAll:选择了什么？
EN