D3.js 水平直方图

Question

我正在尝试设计一个水平直方图，但我只遇到了 Mike Bostock 的 vertical histogram chart。正如here 所提到的，稍微笨拙的解决方案是对包含直方图的元素进行变换旋转。要么，要么不使用 d3.layout.histogram() 并手动写出代码。在 D3 中有没有办法按照以下方式做一些事情

d3.layout.histogram().orient("left")

Answer 1

您可以在渲染时简单地处理它，无需任何转换或重新计算。只需将 d.x 视为 y 位置，将 d.dy 视为宽度而不是高度。

在 x 和 y 之间交换可能看起来不合适，但这是完全合理的。甚至还有以这种方式绘制的径向图表的示例，使用 x 值导出条形的角度，使用 y 值作为与中心的距离。这就是 d3 布局的巧妙之处；他们不会让你使用表示或坐标系——他们只是计算关系。

Answer 2

对于 verti 和 hori，您可以使用我几乎一直使用的那 2 个“全面”实例，并带有性感的过渡。

但是那里仍然有一种转换方法。

垂直： example

<svg width="550" height="250"></svg>

<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 60},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);


var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.txt", function(d) {
  d.value = +d.value;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  g.append("g")
      .attr("class", "axis axis--x")
            .attr("transform", "rotate(-45)")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .selectAll("text")
      .attr("x", x(data[0].date))
      .style("text-anchor", "end")
      .attr("dx", "-1.2em")
      .attr("dy", ".01em")
      .attr("transform", "rotate(-45)" );



  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "r"))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Frequency");

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      //.attr("x", function(d) { return x(d.date); })
      //.attr("y", function(d) { return y(d.value); })
      .attr('x', function(d) { return getX(d);})
      .attr('y', height)  /* function(d) { return height; }}) */
      .attr("width", x.bandwidth())
    .transition()
    .duration(500)
      .delay(function(d, i) { return i * 35;})
    .ease(d3.easeElasticOut)
      .attr('y', function(d) { return getY(d); })
      .attr('height', function(d) { return height - getY(d);});
      //.attr("height", function(d) { return height - y(d.value); });

  g.selectAll(".ba")
    .data(data)
    .enter().append("text")
      .attr("x", function(d) { return x(d.date); })
      .attr("y", function(d) { return y(d.value); })
      .attr("dy", ".90em")
      .attr("dx", ".35em")
      .attr("class","label_barre")
      .text(function(d) { return d.value;});

function type(d) {
  d.value = +d.value;
  return d;
}
function getName(d) {
  return d.date;
}
function getValue(d) {
  return d.value;
}
function getX(d) {
  return x(d.date);
}
function getY(d) {
  return y(d.value);
}

});

</script>

横向：example

<svg width="560" height="400"></svg>
<script>

var width = 560,
    height = 400;

var margin = {top: 20, right: 15, bottom: 30, left: 80},
    width = width - margin.left - margin.right,
    height = height - margin.top - margin.bottom;


var x = d3.scaleLinear().rangeRound([0, height], .05);
var y = d3.scaleBand().rangeRound([height, 0]);

var q = d3.select("svg").append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("Data.txt", function(error, data) {

    data.sort(function(a, b) { return a.value - b.value; });
    //data.sort(function(a, b) { return a.date - b.date; });

    data.forEach(function(d) {
        d.date = d.date;
        d.value = +d.value;
    });

    x.domain([0, d3.max(data, function(d) { return d.value; })]);
    y.domain(data.map(function(d) { return d.date; })).padding(0.1);

    q.append("g")
        .attr("class", "y axis")
        .call(d3.axisLeft(y));


    q.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(10))
        .append("text")
        .attr("transform", "rotate(0)")
        .attr("y", -12)
        .attr("x", +211)
        .attr("dy", "0.71em")
        .attr("text-anchor", "middle")
        .text("Familles");



q.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      //.attr("x", function(d) { return x(d.date); })
      //.attr("y", function(d) { return y(d.value); })
      .attr('y', function(d) {return getX(d);})
      .attr('x', 0)  /* function(d) { return height;}) */
      .attr("height", y.bandwidth())
    .transition()
      .duration(500)
    .delay(function(d, i) { return i * 40;})
      .ease(d3.easeElasticOut)
      .attr('y', function(d) { return getX(d);})
     // .attr('width', function(d) { return width - getY(d);});
      .attr("width", function(d) { return x(d.value); });

    q.selectAll(".ba")
     .data(data)
     .enter().append("text")
      .attr("x", function(d) { return x(d.value); })
      .attr("y", function(d) { return y(d.date); })
      .attr("dy", "1.4em")
      .attr("dx", "-1.1em")
      .attr("class","label")
      .text(function(d) { return d.value;});

    //function type(d) {
      //d.value = +d.value;
      //return d;
    //}
    //function getName(d) {
      //return d.date;
    //}
    function getValue(d) {
      return d.value;
    }
    function getX(d) {
      return y(d.date);
    }
    //function getY(d) {
      //return x(d.value);
    //}

    });