D3 群集布局中的链接和文本路径
Links and textPaths in D3 cluster layout
我的问题与 JS 非常相似 D3 文本路径未显示
一个区别是我想附加返回到链接而不仅仅是节点的 json(好吧,对于每个具有指向其父级的链接的节点,我希望该链接具有相同的 json)...理想情况下,我实际上想从根节点向左添加一行,也无处可去。
然后,我基本上希望在链接中间有文本,遵循链接行会很好,但不是绝对必要的。
我当前的非工作代码是(我不确定,但我是否需要为每个链接添加一个 id 元素?但为此我需要 json!!! 加上我还需要 json 来检索每个链接的文本)然后我想如果我没记错的话,我会使用 textPath 中的 id 来引用路径, 右?
var width = $("#graph").width(),
height = 200;
var cluster = d3.layout.cluster()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var myDiv = document.getElementById('graph');
var svg = d3.select(myDiv).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
d3.json("/datastreams/json/${_encoded}", function(error, root) {
var nodes = cluster.nodes(root),
links = cluster.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
link.append("text")
.style("font-size", function(d) { return d.selected ? "16px" : "10px"; })
.style("font-weight", function(d) { return d.selected ? "bold" : ""; })
.text(function(d) { return "SSSS="+d.name; });
node.append("circle")
.attr("r", function(d) { return d.selected ? 10 : 4.5; });
var refs = node.append("a")
.attr("xlink:href", function(d) { return d.root ? "start" : "end"; });
var text = refs.append("text")
.attr("dx", function(d) { return d.root ? 8 : -8; })
.attr("dy", -4)
.style("text-anchor", function(d) { return d.root ? "start" : "end"; });
text.append("tspan")
.style("font-size", function(d) { return d.selected ? "16px" : "10px"; })
.style("font-weight", function(d) { return d.selected ? "bold" : ""; })
.style("fill", function(d) { return "blue"; })
.text(function(d) { return d.name; });
});
d3.select(self.frameElement).style("height", height + "px");
</script>
啊,我们开始了,因为这似乎正在工作(好吧,我还没有完全完成,但它非常接近我想要的)。
var textPath = path.each(function(l){
var aref = theG.append("a")
.attr("xlink:href", function(d) { return "http://databus.nrel.gov" });
var text = aref.append("text")
.style("fill", function(d) { return "blue"; });
var textPath = text.append("textPath")
.attr("startOffset", "50%")
.attr("xlink:href", "#path"+l.target.name)
.text("insert");
var aref2 = theG.append("a")
.attr("xlink:href", function(d) { return "http://databus.nrel.gov" });
var text2 = aref2.append("text")
.style("fill", function(d) { return "blue"; });
var textPath2 = text2.append("textPath")
.attr("startOffset", "60%")
.attr("xlink:href", "#path"+l.target.name)
.text("delete");
});
相关文章:
- 在崇高文本 3 中编程飞镖,将路径更改为 dart-sdk
- 正在将Fabric.js文本转换为路径
- 如何将文本置于拉斐尔路径的顶部
- 如何创建一个浏览按钮,通过该按钮我可以选择系统的任何路径,即C:Program Files.并将其放入文本框中
- Raphael.js将文本居中放置在路径上
- jQuery 在文本路径 svg 元素方面存在问题
- 仅对路径/形状进行动画处理,在 raphael.js 集中没有文本
- 使用 D3,如何设置轴路径和线条的属性(“填充”、“无”),而不是文本(不编辑样式表)
- 单击时更改路径颜色时打印文本
- SVG 文本路径 - 动画开始偏移量(文本向下滑动 SVG 路径) - 在 JS 中
- D3 群集布局中的链接和文本路径
- Illustrator-在文本路径脚本中批量插入文件名会导致Illustrator崩溃
- 如何使用HTML 5 Canvas绘制“沿弧形的文本”路径
- SVG 文本路径元素在使用 Javascript 生成时在 Firefox 中呈现不正确
- SVG文本路径通过javascript而不是绘图
- 使用HTML文本字段沿着SVG文本路径更新文本
- SVG文本路径在IE中不能正常工作
- 不能用Snap.svg在文本路径上设置startOffset属性
- KineticJS移动文本路径
- 是否有一种方法可以在SVG文本路径上的单个字母周围绘制矩形