Question

我正在使用以下代码。问题是如果我的标签具有相同的值，则值将它们自身连接到现有的x值标签。

output = [
  { day : "M", frequency : 1},
  { day : "M", frequency : 2}
  { day : "T", frequency : 3}
  { day : "T", frequency : 4}
  { day : "M", frequency : 5}
]

var margin = {top: 10, right: 10, bottom: 30, left: 10},
    width = $('#dayhour').width() - margin.left - margin.right,
    height = 240 - margin.top - margin.bottom;
var xValue = function(d) { return d.day; }, // data -> value
    xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1), // value -> display
    xMap = function(d) { return xScale(xValue(d)); }, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

var yValue = function(d) { return d.frequency; }, // data -> value
    yScale = d3.scale.linear().range([height, 0]), // value -> display
    yMap = function(d) { return yScale(yValue(d)); }, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left");

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 + ")");

  xScale.domain(output.map(xValue));
  yScale.domain([0, d3.max(output, yValue)]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.selectAll(".bar")
      .data(output)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", xMap)
      .style("stroke", '#A1B9CC')
      .style("stroke-width", '1')
      .style("fill", "#CFDCE5")
      .attr("width", xScale.rangeBand)
      .attr("y", yMap)
      .attr("height", function(d) { return height - yMap(d); });

在阅读了几个答案后，我尝试将xMap功能更改为此，但它并没有真正帮助。

xMap = function(d,i) { console.log(i); return i * xScale(xValue(d)); }

我确定对此的修复是次要的，但我只想以与数组和放大器相同的顺序显示output条形图。如果day值是重复的，则不要使用相同的x轴位置。

如果有可能，可以指出个人变化，以便其他人也可以从中受益？有很多帖子，但它们不是很有用，因为它们是如此本地化。

Answer 1

在您的代码中，您使用D3的比例来确定创建条形图的位置。将映射输入缩放到输出值，即相同的输入值将映射到相同的输出值。要获得不同的输出，您必须提供不同的输入。也就是说，您的代码很好，但需要更改/修改数据。例如，您可以添加另一个属性：

output = [
  { day : "M", frequency : 1, ID: "1"},
  { day : "M", frequency : 2, ID: "2"}
  { day : "T", frequency : 3, ID: "3"}
  { day : "T", frequency : 4, ID: "4"}
  { day : "M", frequency : 5, ID: "5"}
]

// more code

var xValue = function(d) { return d.ID; },

其余代码可以保持原样。

D3J类似的标签/重复使用相同的x值

1 个答案: