我有一个d3图表,其层次结构如下:
svg
g <- this is row labels
g <- this is col labels
g <- this is actual chart
我的问题是,我想将实际的图表部分(第3 <g>
个元素)转换为没有row和col标签的png文件。
所以基本上我需要一个d3.selection只能选择<svg>
元素及其第三个<g>
元素,前两个<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);
但我想知道是否有更方便和优雅的方式。感谢。
答案 0 :(得分: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);
&#13;
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<svg width="960" height="500"></svg>
&#13;
答案 1 :(得分:0)
由于没有答案我会在这里发布我的解决方案,不确定它是否是最佳方式。目前我通过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);