相关疑难解决方法(0)

我有一个.svg文件,想要将它嵌入我的d3-graphic的svg结构中.

我还需要通过某些g元素的id引用附加到g元素的所有路径/多边形.

我尝试了不同的方法来嵌入和引用svg(g's),但由于某些原因它不起作用:

(1)第一次尝试

// Firefox displays my svg but when i open it with Chrome the svg     
//is not displayed (just default placeholder icon)
// I can't reference the svg-g id's with d3.select functions. 
main_chart_svg
        .append("svg:image")
        .attr("xlink:href", "mySVGpicture.svg")
        .attr("x", "50")
        .attr("y", "50")
        .attr("width", "500")
        .attr("height", "500");  

main_chart_svg.select("#anIdWhichIsInTheSvgFile").remove(); //// This doesn't work

(2)第二次尝试

// This displays the svg but -not- inside my main-chart-svg. I want to keep the graphic   
//things seperate to html-stuff.
d3.xml("mySVGpicture.svg", "image/svg+xml", function(xml) {
        document.body.appendChild(xml.documentElement);
    });
//----------or----------// …

我有一个数据集，CategoryLevel1其中包含一个名为组的名称的列。我将nest函数应用于Categorylevel1并基于键生成了一系列svg。然后，我创建了代表整个数据集中项目的矩形，并在每个svg中重复了这些矩形。我对每个svg应用了一个过滤器，因此只能看到带有该svg键的数据集项。

我的真实数据集大于此处表示的玩具数据集。上面代码的结果是svgs的网页很长-非常混乱。为了使事情更清楚，我希望将svgs根据称为的列进行分组CategoryLevel2。这是我追求的效果：

这是我到目前为止的内容：

var doc = `Manual	Name	CategoryLevel1	CategoryLevel2
DOG	"General Furry, Program and Subject Files"	Average Quantity and Planning	Edibles
TR	Senate Committee on animal Standards	Bowl and Plate Design	Edibles
TR	Published Canine	Bowl and Plate Design	Edibles
TR	Canine case files	Bowl and Plate Design	Edibles
DOG	Canine Files 	Avoiding Neck Strain	Edibles
DOG	Canine Files 	Drooling	Edibles
DOG	Canine Files 	Drooling	Edibles
DG	ADVERTISING	At home	At home
DG …