22、D3与ES6、TypeScript及相关应用详解

D3与ES6、TypeScript及相关应用详解

1. SVG编辑与导入

1.1 SVG编辑注意事项

并非所有SVG程序在编辑导出的SVG文件时都能完美工作。例如，在Adobe Illustrator中打开某些导出的SVG文件时，可能会出现显示问题。这是因为Adobe Illustrator虽然支持导出时添加的嵌入式样式，但只支持特定的类名。若将所有类名从 .link 改为 cls - 1 形式，就可以在Illustrator中加载导出的SVG文件。

1.2 从Inkscape导入SVG并在D3中使用

之前已展示过如何加载外部SVG文件，下面介绍加载在Inkscape中修改后的SVG文件并在D3中显示的步骤：
1. 准备一个SVG图像（如老虎图像），在Inkscape中对其进行旋转等修改。
2. 使用以下代码导入该SVG文件：

d3.xml('data/tiger.svg', loaded);
function loaded(err, tiger) {
    var tigerSVG = d3.select(tiger.documentElement.querySelector("g")).attr("transform", null).node();
    svg.append("g").node().appendChild(tigerSVG);
}

在浏览器中打开该示例，就能看到旋转后的老虎图像，之后还可以使用D3对该SVG进行修改。 </