我正在 D3.js 中制作图表,但我需要专家帮助如何将 y 轴国家标签向左对齐。现在它们向右对齐。
这是代码:
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 30, bottom: 40, left: 90},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");
// csv data
d3.csv("XYZ.csv", function(data) {
// Add X axis
var x = d3.scaleLinear()
.domain([0, 100])
.range([ 0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(function(d){
return "$" + d;
}).ticks(10))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Y axis
var y = d3.scaleBand()
.range([ 0, height ])
.domain(data.map(function(d) { return d.country; }))
.padding(.1);
svg.append("g")
.call(d3.axisLeft(y))
//Bars
svg.selectAll("myRect")
.data(data)
.enter()
.append("rect")
.attr("x", x(0) )
.attr("y", function(d) { return y(d.country); })
.attr("width", function(d) { return x(d.price); })
.attr("height", y.bandwidth() )
.attr("fill", "red")
})
</script>
我试图通过添加到 y 轴来解决它: .attr("transform", "translate(-60, 0)") .attr("文本锚", "开始");
但它不仅向左移动国家标签,还向左对齐垂直轴线。
来自 csv 文件的数据点如下:csv file data points 有两列“国家”和“价格”
你能帮我吗?
谢谢!
答案 0 :(得分:0)
在 D3 中,要将更改应用于轴中的文本,您需要在创建元素后专门选择它,然后应用您的属性。
如果您使用开发工具检查轴,您会看到标签存储在类名称为“域”的组标签下。所以你可以像这样选择然后应用文本锚点:
d3.selectAll('.tick text').attr('text-anchor','start')
我还建议为轴的 g 标记添加一个类名。这样,如果您在一个页面上有多个图表,您可以更具体地进行更改。