D3數據可視化對齊刻度標簽和矩形
[英]D3 Data Visualisation aligning tick labels and rect
問題描述
我是D3庫中用於數據可視化的新手。 我正在嘗試創建一個垂直圖例。 下面是我的實現。 我們可以看到rect s列（在最右邊）和垂直刻度之間有巨大的差距。
我想，由於我的知識有限，我在g.call缺少了一些東西。
有人可以，我在做什么錯？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .counties { fill: none; } .states { fill: none; stroke: #fff; stroke-linejoin: round; } </style> <svg width="1260" height="600"></svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <script src="https://d3js.org/topojson.v2.min.js"></script> </head> <body> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var poverty = d3.map(); var path = d3.geoPath(); var x = d3.scaleLinear() //.domain([1, 10]) .domain([1, 10]) .rangeRound([600, 860]); //console.log("x:==>", x); var y = d3.scaleLinear() //.domain([1, 10]) .domain([1, 10]) .rangeRound([15, 160]); var color = d3.scaleThreshold() //.domain(d3.range(2, 10)) .domain(d3.range(2, 10)) .range(d3.schemeBlues[9]); var g = svg.append("g") .attr("class", "key") //.attr("transform", "translate(0,40)"); .attr("transform", "translate(350,40)"); g.selectAll("rect") .data(color.range().map(function(d) { d = color.invertExtent(d); if (d[0] == null) d[0] = x.domain()[0]; if (d[1] == null) d[1] = x.domain()[1]; return d; })) .enter().append("rect") /*.attr("height", 8) .attr("x", function(d) { return x(d[0]); }) .attr("width", function(d) { return x(d[1]) - x(d[0]); }) .attr("fill", function(d) { return color(d[0]); })*/ .attr("height", 15) .attr("x", 600) .attr("y", function(d) { return y(d[0]); }) .attr("width", function(d) { return x(d[1]) - x(d[0]); }) .attr("fill", function(d) { return color(d[0]); }) ; g.append("text") .attr("class", "caption") /*.attr("x", x.range()[0]) .attr("y", -6)*/ .attr("x",x.range()[0]) .attr("y", -6) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Poverty rate"); g.call(d3.axisRight(y) //.tickSize(13) .tickFormat(function(x, i) { return i ? 2*x : 2*x + "%"; }) .tickValues(color.domain())) .select(".domain") .remove(); var promises = [ d3.json("https://snippetnuggets.com/TnD/us.json"), d3.csv("https://snippetnuggets.com/TnD/county_poverty.csv", function(d) { poverty.set(d.id, +d.rate); console.log(d); }) ] Promise.all(promises).then(ready) function ready([us]) { svg.append("g") .attr("class", "counties") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .enter().append("path") .attr("fill", function(d) { return color(d.rate = poverty.get(d.id)); }) .attr("d", path) .append("title") .text(function(d) { return d.rate + "%"; }); svg.append("path") .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) .attr("class", "states") .attr("d", path); } </script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2019-02-20 19:23:37
軸刻度/標簽和圖例矩形之間存在較大的間隙，因為您在矩形上將x設置為600（ .attr("x", 600) ），這意味着您將矩形相對於矩形定位在右側600像素。 rects的父容器。
發生的情況是，首先添加了a元素，然后將其水平向右平移350個像素（垂直向下平移40個像素）。 稍后將rect添加到此g元素時，相對於g element位置放置rect。 因此，將rect的x屬性設置為600意味着實際上將rect定位在SVG左側的右側950像素（350 + 600）。
要解決此問題，您應該降低rect的x屬性。 負值也有效。
在此處檢查SVG矩形元素的參考： SVG
在d3中將'rect'元素添加到d3中的空白svg畫布失敗。
[英]Adding 'rect' elements to blank svg canvas in d3 is failing on .data()
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.