Question

请让我有些困惑。我以为它们是等价的表达，但显然不是。以下是一段执行饼图的代码的开头。效果很好，并且转换将图表移动到svg的中心

var width = 280,
    height = 200,
    radius = Math.min(width, height) / 2;

var svg = d3.select("#pie")
    .select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

但是我试图将width和height移到js代码之外，并移到index.html文件中。下面的代码应该可以解决问题，但是我在这里丢失了一些东西。图表最终在svg的左上角居中。作为饼图，您最终只会看到一个象限。我已仔细检查过，width和height均具有所需的值。这是html页面中的相关部分：

<div class="chart-stage" id="pie">
      <svg width="280" height="200"></svg>
</div>

我认为svg链接肯定有问题

var svg = d3.select("#pie")
            .select("svg")

var width = +svg.attr("width"),
    height = +svg.attr("height")

var radius = Math.min(width, height) / 2;

svg.attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Answer 1

第一和第二代码块中的选择不同。在第一个svg中指的是对具有转换的g元素的选择。在第二个svg中指的是svg元素的选择。 此svg元素包含一个经过转换的子元素g，但使用svg.append()会将同级元素附加到该g ：

var svg = d3.select("#pie")       // return a selection of the element with id pie
    .select("svg")                // return a selected of the svg
    .attr("width", width)         // return the same svg
    .attr("height", height)       // return the same svg
    .append("g")                  // return a selected g element
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");  // return the selected g element.

此处svg是选定的g元素。

var svg = d3.select("#pie")   // return a selection of the element with id pie
            .select("svg");    // return a selection of the svg

此处svg是选定的svg-完成初始链接后，后续操作：svg.attr().append()不会更改变量的定义。

要使第二个示例的结果与第一个示例相同，您可以将svg变量重新定义为对子g的选择：

var svg = d3.select("#pie")
        .select("svg")

var width = +svg.attr("width"),
    height = +svg.attr("height")

svg = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

不过，将变量命名为g可能更清楚，因为它是g而不是svg的选择。

select（“ svg”）-两个选择之间的区别

1 个答案: