svg操纵方案 基于 D3 还是 angular？
之前还是想简单了， 现在重新写这篇。把逻辑拆分粒度的辨析，放到外面去。
根据这个，html 4种展现样式：普通的html，svg，2D canvas，webgl 3d canvas.
Angular和D3都有各自的数据绑定方式来操作dom，需要合适的方式让它们不打架，代码尽量优雅。
1个dom元素只让1个框架去操作。
尤其是svg中各元素，最好不要ng绑定了一些，d3又绑定另一些。
我需求是：用svg做图形化输入和图文混合的dom展现。不止是单向的输出展示visualization问题，还有图文混合输入的问题
1数据源用ng的service，数据结构为聚合根下辖若干种/若干数量的领域对象
2多个图层叠加，各自管理各自的显示效果。
3输出显示：当数据源发生改变时，图表刷新显示
4输入响应：当图表中元素被拖拽等情况，要保存更新位置等参数，数据源数据相应被更新。
用谁创建dom元素？
2种方案：
1 用D3。包括selectAll选择集/data()数据绑定/添加属性，添加drag等行为
this.tiles
.attr('transform', function (node) {
const piece = node.piece;
// console.log(piece);
return 'translate(' + piece.transform.x + ',' + piece.transform.y + ')';
});
this.images
.attr('xlink:href', function (node) {
const piece = node.piece;
return piece.image;
})
.attr('width', scale)
.attr('height', scale);
2 angular的template：
<svg viewBox="0 0 250 250"
(mousemove)="setCircleLocation($event)">
<svg:defs>
<svg:clipPath >
<svg:circle [attr.cx]="circle[0]" [attr.cy]="circle[1]" r="100" />
</svg:clipPath>
</svg:defs>
<svg:g clip-path="url(#clip)">
<svg:polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
<svg:polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
<svg:path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg:g>
</svg>其实背后都隐含了创建dom的过程。angular在编译后会产生JavaScript DOM API，在运行时创建dom元素：
对HTML与SVG采用不同的API
document.createElement('div');
document.createElementNS('http://www.w3.org/2000/svg', 'path');
js有点相当于前端的汇编语言，不论用jquery，d3，还是angular，最终都是一样的js代码。
区别在于，越往汇编层，越暴露底层步骤（每个div操作，类似于操作每个寄存器）；而越往高层走，更强调的是目的和最终要的结果。
高级程度最高的，当然是angular了。
这也就澄清了一个自己的误区，
D3≠svg。
虽然通常看到的svg操作案例，都是用d3或者基于d3的扩展包. 但绝不是说svg只能用d3来操作。
d3虽然名字是data driven document。 但其实里面的document指的是svg或canvas，d3更类似于openpyxl这样的操作xlsx的库，不等于xlsx格式标准。完全可以用xlwt来操作xlsx。
d3主要是实现了很多现成的layout（比如力导向图什么的），方便显示地图，定义动画/拖拽/圈选（用brush）比较方便。
从功能上说，angular 一样是data driven document，只不过是用模板+数据绑定的方式。
d3的data只能是array型，而angular绑定的数据格式就灵活多了，单个的class也可以，array型的用*NgFor。
用汇编还是脚本语言，都能写出同样功能程序来。在不考虑的性能的时候，无非是开发速度/复用难度。这些考虑。
结论：
还是老实一点，根据职责不同，读写分离，准备2种方案：
读：用D3单纯展示数据模型，数据变化时用d3重画
写：用ng双向绑定svg，加载数据模型，获取svg拖拽、圈选事件，修改数据模型。
1 如果仅仅需要数据->svg，展示、特别是简单的图、各种D3有的layout，或者地图这种作为底图，数据不变的图，（可以拖拽，但不要拖拽后的结果），那么就直接用D3，不用ng，或者ng简单封装即可。
2 如果需要把svg作为一种输入界面，工作图，如需要保存、分发拖拽后元素的位置，需要双向数据绑定（svg<->数据模型），不需要动画、过渡，那么就直接用ng，不用d3
d3类似matplotlab，做visualization非常舒服，做编辑图片像素区域的界面就非常难受，还是乖乖用qt的QImage，Qpixmap舒服。
ng的templates可以显式表达svg的结构，模板语法也类似jinja2。
——看文档、想、实做。。。好几天了，虽然略有纠结，磕磕绊绊的，但好在有读写分离的经验，对unity，qt，matplotlib都还算熟悉，得到现在的结论还算不纠结。
附录A，NG的小坑
SVG不是html，而是XML。ng在处理模板中自定义元素的时候，不能和html一样。
应该这样做
@Component({
selector: '[app-logo-left]',
templateUrl: './app-logo-left.component.html'
})
export class LogoLeftComponent {
}把方括号写在selector里面，在模板里不写方括号
<svg viewBox="0 0 250 250"> <svg:g app-logo-left /> <svg:g app-logo-right /> <svg:g app-logo-a /> </svg>
附录B，D3的小坑
1
In D3,
data()accepts only 3 things: an array, a function or nothing
2 data带主键函数之前，必须先不带主键函数已经绑定过一次，才可以，否则报错
http://www.ourd3js.com/wordpress/811/
//数据
var persons = [ { id: 3 , name:"张三" },
{ id: 6 , name:"李四" },
{ id: 9 , name:"王五" }];
//选择body中的所有的p元素
var p = d3.select("body").selectAll("p");
//绑定数据，并修改p元素的内容
p.data(persons)
.text(function(d){
return d.id + " : " + d.name;
});
//更新persons里的数据
persons = [ { id: 6 , name:"张三" },
{ id: 9 , name:"李四" },
{ id: 3 , name:"王五" }];
//根据键函数的规则绑定数据，并修改内容
p.data(persons, function(d){ return d.id; })
.text(function(d){
return d.id + " : " + d.name;
});
</script>
</body>3 要想使用d3.drag(),.必须首先用data()进行绑定
不可避免在angular里同时用数据绑定和d3了
4 d3.drag()的事件，v4里精简成了'start' 'drag','end'。书和搜索结果里很多都还是v3的，是'dragstart' 会报错。还是要多看最新的官方文档。
5 确实底层。比用matplotlib还底层，有点不适应。
坐标轴axis 都要自己手动调位置。
用path画图每个点都要自己调用scale设置比例尺。
边距留白，要自己考虑，设置在scale定义里
……
如果不是为了定制特殊效果的图，或者看中力导向图这些特殊的图，只是普通显示一下，可以用别的封装得高级些的库了。
另一篇Visualizing Data with Angular and D3的作者给出的数据绑定方案：
写了一个d3组件，封装了d3.js 图类型比如ForceDirectedGraph，然后 图上node 等等，把这些d3里的东西定义在models里，然后定义了D3.service。
然后，自己写的实际的图组件，就和d3隔离了，只调用自己写的d3组件
从自己写的d3组件实例化ForceDirectedGraph，而不是直接import * as d3 from 'd3';
