SVG图标打点实现
最近接到一个任务，需要在底图上标注点。实现方式用d3结合svg方式
第一种实现方式，在svg上动态创建一个图片，实现方式如下：
that.dataParent.bgObject = that.dataParent.container
.append("g")
.attr("class", "dot12")
.append("image")
.attr("xlink:href", that.dataParent.backgroudImage)
.attr("x", "0")
.attr("y", "0")
.attr("width", that.dataParent.containerWidth)
.attr("height", that.dataParent.containerHight);
控制图片的高度从此实现图标大小的缩放，实现的很顺利，很快完成的了任务。
过了一段时间发现，这种实现很难满足现实需求，如果每个点又5个状态，系统中要保持5张不同颜色的图片。如果有100中不同类型的点，那要保存500中图片。图片设计人员表示需要很多工作量。
讨论过后，决定用字体图标显示，把图片做成字体图标。讨论的时候感觉这种方式实现也不复杂。就答应了。
谁知这就是我的噩梦，花了两天实现才完全实现上述功能。记录如下：
我google上搜索，如果想在svg上使用icons，大概有两种方式
第一种用text标签，在网上搜索如下
You need to use the proper Unicode inside a normal text element, and then set the font-family to "FontAwesome" like this:
node.append('text')
.attr('font-family', 'FontAwesome')
.attr('font-size', function(d) { return d.size+'em'} )
.text(function(d) { return '\uf118' });
This exact code will render an "icon-smile" icon. The unicodes for all FontAwesome icons can be found here:
http://fortawesome.github.io/Font-Awesome/cheatsheet/
Be aware that you need to adapt the codes in the cheatsheet from HTML/CSS unicode format to Javascript unicode format so that must be written \uf118 in your javascript.
个人感觉比较复杂，因为我应用中需要图标的叠加，所有我没有采用此方法。
第二种方法
g.append('svg:foreignObject')
.attr("width", 100)
.attr("height", 100)
.append("xhtml:body")
.html('');
发现这种方式操作解决，就开始用这种方式实现。
一切都很顺利，但字体的大小不能小于12px，如果小于12px，设置的字体无效。在我的应用中必须动态设置图标的大小。
尝试了好多方法，浪费了一天的时间，原来的schrome做了限制。
好那就改变限制，先是用-webkit-text-size-adjust: none;发现怎么设置都无效，
于是又问google ，发现这种方式已经废弃。
最终找到一种方法，用js控制 translate 和scale
.append("svg:foreignObject")
.attr("transform", function(d) {
return (
"translate(" +
(d.x ) +
"," +
(d.y ) +
") scale("+that.dataParent.slider+") translate(" +
( - d.x) +
"," +
(- d.y) +
")"
);
})
.attr("style", "font-size:1px;")
.attr("width", RECT_W)
.attr("height", RECT_H)
// .append("image")
// .attr("xlink:href", function(d) {
// return d.pointImage;
// })
.attr("x", function(d) {
return d.x - RECT_W / 2 + offset_x;
})
.attr("y", function(d) {
return d.y - RECT_H + offset_y;
})
// .attr("width", RECT_W)
// .attr("height", RECT_H)
.on("click", function(d, i) {
if (that.isLargeScreen) {
that.openModel(d);
}
})
.append("xhtml:body")
.attr("xmlns", "http://www.w3.org/1999/xhtml")
.attr("style", "-webkit-text-size-adjust: none;")
.html(function(d) {
return ' ';
});
实现原理：https://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/
真实产品经理一句话，开发人员累几天。