Question

我正在尝试使用d3js设置水平条形图。我想在y轴上添加带有文本标签的自定义图例。这些标签有不同的尺寸，所以我想将它们对齐到右边。

我尝试了以下方法，但它无法正常工作：

d3.csv("./top_sources.csv", function(error, data) {
  data.forEach(function(d) {
    d.value = +d.value;
  });

  var x = d3.scale.linear()
    .range([0, 0.8 * width]);

  x.domain([0, d3.max(data, function(d) { return d.value; })]);
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("transform", function(d, i) { var ypos = height - (i-1) * barHeight ; return "translate(" + 0.2 * width + "," + ypos + ")"; })
      .attr("width", function(d) { return 0; })
      .attr("height", barHeight - 1)
      .style("fill", function(d) { return color(d.name); });

  svg.selectAll(".bar")
      .data(data)
      .transition()
      .duration(1000)
      .attr("width", function(d) { return x(d.value); });

  svg.selectAll(".legend")
      .data(data)
      .enter()
      .append("text")
      .attr("class", ".legend")
      .attr("width", function(d) { return d.key.length; })
      .attr("x", function(d) { return 100 - d.key.length; })
      .attr("y", barHeight / 2)
      .attr("transform", function(d, i) { var ypos = height - (i-1) * barHeight ; return "translate(0," + ypos + ")"; })
      .text(function(d) { return d.key; });
});

我想我必须得到标签长度并将其减去自定义值（我在这里使用100）但我无法正确地做到这一点。我怎样才能做到这一点？

由于

将文本对齐到右侧

0 个答案: