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的所有文本元素均包含这些文本。鉴于此，很容易理解，这破坏了其余代码，这些代码现在会将其他内容附加到文本元素。即使它在语法上是有效的（实际上不是），它很可能仍会破坏布局。

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

轴生成中链接语法的行为

1 个答案: