轴生成中链接语法的行为

Question

我正在编写d3.js（d3 v4）代码来生成一个简单的条形图，我设法做了，但我对生成轴的代码行为感到困惑。

所以基本上，我将图表代码封装到一个包含基本访问器的函数中。

这里有一些代码显示了我的图表功能的核心。

function chart(selection){
      selection.each(function(data){

        var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.5);
        var y = d3.scale.linear().range([height, 0]);

        var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");

        var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left")
          .ticks(10);

        x.domain(data.map(function(d) { return d.name; }));
        y.domain([0, d3.max(data, function(d) { return d.value; })]);

        var div = d3.select(this)
        var svg = div.selectAll("svg")
          .data([data]).enter()
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", "-.55em")
          .attr("transform", "rotate(-90)" );

        svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 5)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Frequency");

        svg.selectAll(".bar")
          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("fill", "#1CE6FF")
          .attr("x", function(d) { return x(d.name); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.value); })
          .attr("height", function(d) { return height - y(d.value); });
      });

所以我有两个问题：1）是否可以使用多个代码块调用svg.append（“g”），如上所示在代码中？ 2）当我替换以下代码时：

var svg = div.selectAll("svg")
          .data([data]).enter()
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", "-.55em")
          .attr("transform", "rotate(-90)" );

有了这个（基本上将单个链代码块中的两个块合并）：

var svg = div.selectAll("svg")
          .data([data]).enter()
          .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")").append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
          .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", "-.55em")
          .attr("transform", "rotate(-90)" );

...为什么我的y轴没有显示在正确的位置？ <g class="y axis">...</g>标签嵌套在嵌套在x轴标签中的<text>标签中。为什么2块代码与单块代码的行为不一样？

Answer 1

代码的结构定义了生成的SVG的结构。在函数chart()中，变量svg保持对最后附加的<g>的引用，而不是之前附加的<svg>本身。请注意，第一次创建后的所有语句如何附加到svg的同一外部组。这是一个完美的方法。

但是，如果连接语句，就像在上一个片段中所做的那样，svg的值会发生变化，因为右侧（即表达式的返回值）会发生变化。由于您上次选择了附加x轴的所有文本元素，因此svg正好包含那些文本。鉴于此，很容易理解这会破坏代码的其余部分，现在将其他内容附加到文本元素。即使它在语法上是有效的，但事实并非如此，它很可能仍会破坏布局。

如果要重新排列代码结构，则必须确保在需要时提供正确的引用。