D3JS 动画水平图表改进

Question

我正在创建一个水平动画d3图表。如何反转 x 轴并以更动态的方式定位条形。

条形的宽度是否正确，还是 xaxis 刻度正确？使用 d3 版本 4

进行中的横向工作http://jsfiddle.net/ueg3bjf7/

垂直图表代码基于此http://jsfiddle.net/myf1zhar/

$(document).ready(function() {
  var $this = $(".barchart");
  var w = $this.data("width");
  var h = $this.data("height");
  var data = $this.data("data");
  var data = [{
      "label": "Apples",
      "value": 100
    },
    {
      "label": "Pears",
      "value": 120
    },
    {
      "label": "Bananas",
      "value": 20
    }
  ];
  var configurations = $this.data("configurations");
  function colores_google(n) {
    var colores_g = ["#f7b363", "#448875", "#2b2d39", "#c12f39", "#f8dd2f", "#1b91dc"];
    return colores_g[n % colores_g.length];
  }
  //asess the margin bottom for the chart based on the max char label
  var charLabelCount = [];
  data.map(function(d) {
    var labelStr = d.label.toString();
    charLabelCount.push(labelStr.length);
  })
  var maxChars = charLabelCount.reduce(function(a, b) {
    return Math.max(a, b);
  });
  var bottomMarg = 60;
  if (maxChars > 15) {
    bottomMarg = 170;
  }
  //bottom margin calculation
  var margin = {
      top: 15,
      right: 20,
      bottom: bottomMarg,
      left: 40
    },
    width = w - margin.left - margin.right,
    height = h - margin.top - margin.bottom;

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

  var yAxis = d3.axisBottom(y);
  var xAxis = d3.axisLeft(x);
  var svg = d3.select($this[0])
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("viewBox", "0 0 " + w + " " + h)
    .attr("preserveAspectRatio", "xMidYMid meet")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("class", "barchartg");
  function sortBy(array, key) {
    var sorted = array.sort(function(a, b) {
      return parseFloat(b[key]) - parseFloat(a[key]);
    });
    return sorted;
  }
  var sortedMax = 45;
  if (configurations) {
    if (configurations[0]["maxValue"]) {
      sortedMax = configurations[0]["maxValue"] + 5;
    }
  } else {
    sortedMax = sortBy(data, "value")[0]["value"] + 5;
  }
  x.domain(data.map(function(d) {
    return d.label;
  }));
  y.domain([0, sortedMax]);
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0,25)")
    .call(xAxis);
  svg.selectAll(".x.axis text")
    .attr("transform", "rotate(-60) translate(-5,-5)")
    .style("text-anchor", "end");
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("");
  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("fill", function(d, i) {
      return colores_google(i);
    })
    .attr("x", function(d) {
      return 0;
    })
    .attr("width", function(d) {
      return d.value;
    })
    .attr("y", function(d, i) {
      return 45 + (i * 90);
    })
    .attr("height", function(d) {
      return 50;
    });

  d3.selectAll("rect").transition()
    .duration(500)
    .delay(function(d, i) {
      return 500 * i;
    })
    .attr("width", function(d) {
      return 0;
    })
  setTimeout(function() {
    d3.selectAll("rect").transition()
      .duration(500)
      .delay(function(d, i) {
        return 600 * (3 - i);
      })
      .attr("width", function(d) {
        return d.value;
      })
  }, 2000);
});

Answer 1

我会尽量回答你的问题。

你如何反转 x 轴

您必须更改轴的域

y.domain([sortedMax, 0]);

放置条形图

您必须将轴转换为图形的宽度

svg.append("g").attr("transform", "translate(0, 300)").attr("class", "y axis")

条形的宽度是否正确，还是 xaxis 刻度正确？

您必须使用乘数来计算每根柱线的宽度，使用图表的最大宽度和最大值。我添加了 x 轴平移的 25 个像素

var mult = (w + 25) / sortedMax;
...
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("fill", function(d, i) {
  return colores_google(i);
})
.attr("x", function(d) {
  return 0;
})
.attr("width", function(d) {
  return d.value * mult;
})
.attr("y", function(d, i) {
  return 45 + (i * 90);
})
.attr("height", function(d) {
  return 50;
});
...
setTimeout(function() {
d3.selectAll("rect").transition()
  .duration(500)
  .delay(function(d, i) {
    return 600 * (3 - i);
  })
  .attr("width", function(d) {
    return d.value * mult;
  })
}, 2000);

您可以在此小提琴中看到结果 http://jsfiddle.net/jfLgawue/65/