0
A
回答
2
var margin = {top: 40, right: 40, bottom: 40, left: 40},
w = 0.5 * D3_WIDTH - margin.left - margin.right,
h = 0.25 * D3_HEIGHT - margin.top - margin.bottom,
x_range = d3.scale.linear().range([0, w]),
y_range = d3.scale.linear().range([0, h]),
color = d3.scale.category20c();
var vis = d3.select('#divName').append("svg:svg")
.attr("width", w)
.attr("height", h)
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var partition = d3.layout.partition()
.value(function(d) { return d.size; });
d3.json(jsonRequestUrl, function(json) {
var data = partition(json);
var rect = vis.selectAll("rect").data(data).enter()
.append("svg:rect")
.attr("x", function(d) { return x_range(d.x); })
.attr("y", function(d) { return y_range(d.y); })
.attr("width", function(d) { return x_range(d.dx); })
.attr("height", function(d) { return y_range(d.dy); })
.attr("fill", function(d) {return color(d.name);})
.style("cursor", "pointer")
.on("click", click);
var fo = vis.selectAll("foreignObject").data(data).enter()
.append("svg:foreignObject")
.attr("x", function(d) { return x_range(d.x); })
.attr("y", function(d) { return y_range(d.y); })
.attr("width", function(d) { return x_range(d.dx); })
.attr("height", function(d) { return y_range(d.dy); })
.style("cursor", "pointer")
.text(function(d) { return d.name })
.on("click", click);
function click(d) {
x_range.domain([d.x, d.x + d.dx]);
y_range.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
rect.transition()
.duration(750)
.attr("x", function(d) { return x_range(d.x); })
.attr("y", function(d) { return y_range(d.y); })
.attr("width", function(d) { return x_range(d.x + d.dx) - x_range(d.x); })
.attr("height", function(d) { return y_range(d.y + d.dy) - y_range(d.y); });
fo.transition()
.duration(750)
.attr("x", function(d) { return x_range(d.x); })
.attr("y", function(d) { return y_range(d.y); })
.attr("width", function(d) { return x_range(d.x + d.dx) - x_range(d.x); })
.attr("height", function(d) { return y_range(d.y + d.dy) - y_range(d.y); });
}
});
相關問題
- 1. d3js Zoomable冰柱數據
- 2. 如何在D3中的Zoomable冰柱佈局中獲取文本標籤的旋轉?
- 3. 將hyeperlinks添加到zoomable d3圓形包中
- 4. 如何將文字添加到谷歌圖表柱形圖軸?
- 5. 如何將文本添加到D3陽光圖的中心
- 6. D3將文本添加到矩形中
- 7. D3:無法將文本元素添加到圖表
- 8. d3將文本添加到SVG矩形
- 9. 如何隱藏D3 Zoomable Pack Layout中標籤的重疊文本?
- 10. 如何添加文本到力向圖中D3.js
- 11. 如何將文本添加到表格
- 12. d3.js我如何向Marimekko圖表添加文本
- 13. 如何將註記文本添加到Highcharts圖表中?
- 14. 如何文本添加到D3 JS圓環圖
- 15. 什麼是冰凍冰柱?
- 16. D3.JS添加新數據時的柱形圖柱偏移量
- 17. D3.js Zoomable Treemap庫與其他圖表版本不兼容
- 18. d3.partition的層級級別標籤冰柱圖
- 19. D3 zoomable yAxis in hours
- 20. 將文本提示添加到條形圖d3
- 21. D3 - 將文本標籤添加到更新力佈局圖
- 22. 如何將文本從文本框添加到列表中
- 23. D3圖:如何將文本追加到只給定鏈路
- 24. D3.js添加文字時的柱狀圖反演
- 25. 如何使d3 zoomable treemap響應?
- 26. 如何使用d3.js將標籤添加到我的圖中?
- 27. 將圖例添加到D3 Force Directed Graph
- 28. 如何將數據標籤添加到柱狀圖?
- 29. 如何將圖例添加到圖表?
- 30. 使用d3將文本添加到svg路徑中
爲你做這項工作? –
是的,它確實 - 文本的過渡也很好。但是您可能想要編輯文本的座標函數以便將它們居中(例如) - 如果這是您想要執行的操作。 – Isaac
更重要的是,您可能需要更改設置自定義兒童功能以及更新分區對象上的值功能 – Isaac