d3.js中的渲染顺序
Rendering order in d3.js
以下是代码:
//Circle Data Set
var circleData = [
{ "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
{ "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
//Create the SVG Viewport
var svgContainer = d3.select("#svgContainer")
.attr("width",200)
.attr("height",200);
//Add the SVG Text Element to the svgContainer
var text = svgContainer.selectAll("text")
.data(circleData)
.enter()
.append("text");
var circles = svgContainer.selectAll("circle")
.data(circleData)
.enter()
.append("circle")
.attr("cx", function(d) {return d.cx})
.attr("cy", function(d) {return d.cy})
.attr("r", function(d) {return d.radius})
.attr("fill", function(d) {return d.color})
//Add SVG Text Element Attributes
var textLabels = text
.attr("x", function(d) { return d.cx; })
.attr("y", function(d) { return d.cy; })
.text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
http://jsfiddle.net/kindlychung/jrsxLfpg/1/
d3似乎总是先渲染文本,这意味着文本部分隐藏在圆圈后面:
<svg id="svgContainer" width="200" height="200">
<text x="20" y="20" font-family="sans-serif" font-size="20px" fill="red">( 20, 20 )</text>
<text x="70" y="70" font-family="sans-serif" font-size="20px" fill="red">( 70, 70 )</text>
<circle cx="20" cy="20" r="20" fill="green"></circle>
<circle cx="70" cy="70" r="20" fill="purple"></circle></svg>
我该如何调整?
您只需要在绘制圆之后绘制文本节点。
//Circle Data Set
var circleData = [
{ "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
{ "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
//Create the SVG Viewport
var svgContainer = d3.select("#svgContainer")
.attr("width",200)
.attr("height",200);
// draw your circles and any other graphic elements first!
var circles = svgContainer.selectAll("circle")
.data(circleData)
.enter()
.append("circle")
.attr("cx", function(d) {return d.cx})
.attr("cy", function(d) {return d.cy})
.attr("r", function(d) {return d.radius})
.attr("fill", function(d) {return d.color})
// These will now be appended AFTER the circles
// When you use `append` it will add text nodes to end
// of svgContainer
var text = svgContainer.selectAll("text")
.data(circleData)
.enter()
.append("text");
// Here you are editing the pre-existing `text` nodes that you added above.
// Note that you don't use `append` here.
// Instead, you are modifying the d3 selection stored in `text`
var textLabels = text
.attr("x", function(d) { return d.cx; })
.attr("y", function(d) { return d.cy; })
.text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
以下是您代码的编辑版本:http://jsfiddle.net/jrsxLfpg/2/
相关文章:
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- 使用JS按顺序显示图像,而不是随机显示
- js”;在“;不按特定顺序追加键/值
- Node.js:多个然后'It’执行顺序不正确
- 如何使d3.js树布局按字母顺序对节点进行排序
- 如何在角度js的自动完成下拉列表中对项目列表(按字母顺序)进行排序
- 按顺序异步加载JS脚本(等待上一个脚本完成)
- 使用Require.js按照依赖关系的顺序加载JavaScript
- 使函数按顺序运行[Node JS]
- 如何根据 js 中每个单词的第 n 个字母按字母顺序排列列表
- 使用 KNOCKOUT.js 在禁用元素的 HTML 中保持 Tab 键顺序
- Node.JS中的模式顺序是否重要
- 如何通过grunt contrib uglify按顺序缩小js文件
- JS中jQuery函数的过程顺序
- 通过普通JS更改元素的索引(顺序)
- Knockout.JS加载顺序问题
- zend按顺序加载js文件
- Gulp-Concat文件的顺序然后是任何其他的js文件
- 如何保存 SlickGrid 列顺序 (js)
- Firefox中对象元素的顺序(JS枚举)