选择 d3 图表的一部分答案

【问题标题】：Select portion of d3 chart选择 d3 图表的一部分
【发布时间】：2017-03-17 21:08:42
【问题描述】：

我有一个 d3 图表，它的层次结构如下所示：

svg
   g <- this is row labels
   g <- this is col labels
   g <- this is actual chart

我的问题是，我想将实际图表部分（第 3 个<g> 元素）转换为没有行和列标签的 png 文件。所以基本上我需要一个 d3.selection 可以选择 <svg> 元素和它的第三个 <g> 元素，前 2 个 <g> 被从选择中剥离，所以当这个选择被转换为 XML 字符串并绘制 <canvas> ，没有标签。

目前我通过对 xml 进行文本处理来实现：

var source = (new XMLSerializer()).serializeToString(d3.select("svg").node());
var xmldoc = $.parseXML(source);
$(xmldoc).find("g:eq(1), g:eq(2)").remove();
var src2 = (new XMLSerializer()).serializeToString(xmldoc);

但我想知道是否有更方便和优雅的方式。谢谢。

【问题讨论】：

为什么不给g元素类值，然后按类选择。或唯一 id 并按 id 选择。

标签： javascript xml d3.js svg

【解决方案1】：

另一种方法是修改 SVG CSS 选择器：

d3.select("svg")

到：

d3.select("svg > g:nth-child(3)")

这将返回属于 SVG 父级的第三个 <g> 标记，这样您以后就不必从 XML 中删除前两个元素。显示选择的示例：

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom;
var g1 = svg.append("g").attr("transform", "translate(50,50)");
var g2 = svg.append("g").attr("transform", "translate(150,50)");
var g3 = svg.append("g").attr("transform", "translate(250,50)");
g1.append("rect").attr("id", 1).attr("width", 25).attr("height", 25).attr("fill", "purple");
g2.append("rect").attr("id", 2).attr("width", 25).attr("height", 25).attr("fill", "blue");
g3.append("rect").attr("id", 3).attr("width", 25).attr("height", 25).attr("fill", "orange");

var thirdGroup = d3.select("svg > g:nth-child(3)");

thirdGroup.select("rect")
  .transition().duration(600).ease("quad")
  .attr("width", 50).attr("height", 50);

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<svg width="960" height="500"></svg>

【讨论】：

【解决方案2】：

由于没有答案，我将在这里发布我的解决方案，不确定这是否是最好的方法。目前我通过对 xml 进行文本处理来实现：

var source = (new XMLSerializer()).serializeToString(d3.select("svg").node());
var xmldoc = $.parseXML(source);
$(xmldoc).find("g:eq(1), g:eq(2)").remove();
var src2 = (new XMLSerializer()).serializeToString(xmldoc);

【讨论】：