Question

我在d3.js中有一个水平条形图，我想为图表的每个条形添加“y-label”这个名称。

我的条形图的原始示例是http://bl.ocks.org/mbostock/2368837 没有负值。所以我为了我的目的修改了它

var margin = {top: 40, right: 20, bottom: 100, left: 60},
width = 720 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;

var x_4 = d3.scale.linear()
    .range([0, width])

var y_4 = d3.scale.ordinal()
    .rangeRoundBands([0, height], .2);

var xAxis_4 = d3.svg.axis()
    .scale(x_4)
    .orient("top");

var tip_4 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
  return "<strong>Value:</strong> <span style='color:red'>" + d.ln_numfollowers + "</span>";
})

var sampleSVG_4 = d3.select("#LinkedIn").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 + ")")
    .call(tip_4);

d3.csv("@routes.Assets.at("d3/linkedin_competitor_prova.csv")", type, function(error, data) {
  x_4.domain(d3.extent(data, function(d) { return d.ln_numfollowers; })).nice();
  y_4.domain(data.map(function(d) { return d.organization_name; }));

  sampleSVG_4.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", function(d) { return d.ln_numfollowers < 0 ? "bar negative" : "bar positive"; })
      .attr("x", function(d) { return x_4(Math.min(0, d.ln_numfollowers)); })
      .attr("y", function(d) { return y_4(d.organization_name); })
      .attr("width", function(d) { return Math.abs(x_4(d.ln_numfollowers) - x_4(0)); })
      .attr("height", y_4.rangeBand())
      .on('mouseover', tip_4.show)
        .on('mouseout', tip_4.hide);;

  sampleSVG_4.append("g")
      .attr("class", "x axis")
      .call(xAxis_4);

  sampleSVG_4.append("g")
      .attr("class", "y axis")
    .append("line")
      .attr("x1", x_4(0))
      .attr("x2", x_4(0))
      .attr("y2", height)  
});

function type(d) {
  d.ln_numfollowers = +d.ln_numfollowers;
  return d;
}

csv数据文件是：

ORGANIZATION_NAME，ln_numfollowers

Carrot.mx，100 CarJump，45

我不知道为什么组织名称没有显示。如您所见，即使在原始示例中，y轴上的标签也未显示。

Answer 1

一些问题：

1。）您可能不想使用extent创建x轴。使用您的示例数据，这将创建一个从45到100的图表。您可能希望从零开始。

x_4.domain([0,d3.max(data, function(d) { return d.ln_numfollowers; })]);

2。）你实际上并没有创造一个传统的y轴。这段代码：

sampleSVG_4.append("g")
  .attr("class", "y axis")
  .append("line")
  .attr("x1", x_4(0))
  .attr("x2", x_4(0))
  .attr("y2", height)

创建的y轴只是一条直线。它没有使用内置的d3轴创建。你需要的是：

var yAxis_4 = d3.svg.axis()
    .scale(y_4)
    .orient("left");

....

sampleSVG_4.append("g")
  .attr("class", "y axis")
  .call(yAxis_4);

示例here。

水平条形图d3.js没有显示标签

1 个答案: