D3 左对齐图例文本
Posted
技术标签:
【中文标题】D3 左对齐图例文本【英文标题】:D3 left justify legend text 【发布时间】:2017-03-28 16:41:33 【问题描述】:我有一个带有图例的条形图,见下文
这很好,但是我似乎无法让文本左对齐
<script>
var margin = top: 20, right: 55, bottom: 30, left: 40,
width = 350 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#7CA2C8", "#ECAD6F", "#C3D1DC", "#7CC8A2","#C49AC4", "#F6D587", "#AAC1B4", "#DBB087", "#E7CBC0", "#A2C87C", "#BAA187","#8BBFDA"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dataFile = ".\\temp\\data.csv";
d3.csv(dataFile, function(error, data)
if (error) throw error;
data.sort(function(a, b) return d3.ascending(a.Year, b.Year); )
var ageNames = d3.keys(data[0]).filter(function(key) return key !== "Year"; );
data.forEach(function(d)
d.etypes = ageNames.map(function(name) return name: name, value: +d[name]; );
);
x0.domain(data.map(function(d) return d.Year; ));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) return d3.max(d.etypes, function(d) return d.value; ); )]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -35)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Turnover Ratio");
var year = svg.selectAll(".year")
.data(data)
.enter().append("g")
.attr("class", "year")
.attr("transform", function(d) return "translate(" + x0(d.Year) + ",0)"; );
year.selectAll("rect")
.data(function(d) return d.etypes; )
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) return x1(d.name); )
.attr("y", function(d) return y(d.value); )
.attr("height", function(d) return height - y(d.value); )
.style("fill", function(d) return color(d.name); );
var legend = svg.selectAll(".legend")
.data(ageNames.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 5)
.attr("y", 5)
.attr("width", 5)
.attr("height", 5)
.style("fill", color);
legend.append("text")
.attr("x", width + 53)
.attr("y", 5)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) return d; );
);
</script>
.style("text-anchor", "end") 是我所拥有的......但是将其更改为 start 可以解决这个问题
更糟糕的是......我如何让 Term 离开,证明 Permanent 所在的位置?
【问题讨论】:
如果左对齐,图表会是什么样子? 我不关注我只需要以这种方式对齐的文本 图例中的文字已经左对齐,据我所知,两张图片完全相同,所以我不明白为什么其中一张是“更糟” 哦,废话,我在同一张图片中粘贴了两次,明天就修复了 【参考方案1】:你必须调整文本的位置,而不仅仅是text-anchor
属性:
legend.append("rect")
.attr("x", width - 5)
.attr("y", 5)
.attr("width", 5)
.attr("height", 5)
.style("fill", color);
legend.append("text")
.attr("x", width -8)
.attr("y", 5)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) return d; );
查看演示:
var margin = top: 20, right: 55, bottom: 30, left: 40,
width = 350 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var color = d3.scale.ordinal()
.range(["#7CA2C8", "#ECAD6F", "#C3D1DC", "#7CC8A2","#C49AC4", "#F6D587", "#AAC1B4", "#DBB087", "#E7CBC0", "#A2C87C", "#BAA187","#8BBFDA"]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var ageNames = ["Team", "Permanent"];
var legend = svg.selectAll(".legend")
.data(ageNames.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) return "translate(0," + i * 20 + ")"; );
legend.append("rect")
.attr("x", width - 5)
.attr("y", 5)
.attr("width", 5)
.attr("height", 5)
.style("fill", color);
legend.append("text")
.attr("x", width -8)
.attr("y", 5)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) return d; );
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
【讨论】:
是的,感谢 Gerado!将 end 改为 start 然后摆弄 the.attr("x", width -8) 让事情正常进行以上是关于D3 左对齐图例文本的主要内容,如果未能解决你的问题,请参考以下文章
R语言ggplot2可视化:ggplot2可视化分组箱图,将可视化图像的图例(legend)放置在图像底部左边左对齐其中图例信息水平平铺 (position legend bottom left)
R语言ggplot2可视化:ggplot2可视化分组箱图,将可视化图像的图例(legend)放置在图像底部左边左对齐其中图例信息水平平铺 (position legend bottom left)
R语言ggplot2可视化:ggplot2可视化分组箱图,将可视化图像的图例(legend)和标题(title)放置在图像左上方并左对齐其中图例信息水平平铺(top left)