Question

我刚刚开始使用D3.js，并且一直试图使这个堆积的条形图水平（下面的链接）。

https://github.com/DeBraid/www.cacheflow.ca/blob/master/styles/js/d3kickchart.js http://cacheflow.ca/blog/index.html（您可以在页面中间找到图表）

结果，我完全堆放在中途......如果有人给我一些指南来存档，我将不胜感激。

解决问题： 我找到了使得条形图水平的方法。希望这可以帮助那些面临同样问题的人。以下是固定代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>


</style>

<body>
<div id="chart-svg"></div>    

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>    
var margin = {top: 20, right: 50, bottom: 100, left: 75},
    width = 740 - margin.left - margin.right,
    height = 170 - margin.top - margin.bottom;

var svg = d3.select("#chart-svg").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 + ")");

d3.csv("mta.csv", function (data){

    var headers = ["meeting","construction","management","aa","bb","cc"];

    var layers = d3.layout.stack()(headers.map(function(period) {
        return data.map(function(d) {
          return {x: d.Category, y: +d[period]};
        });
    }));

console.log(layers);

    var yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); });
    var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

    var yScale = d3.scale.ordinal()
        .domain(layers[0].map(function(d) { return d.x; }))
        .rangeRoundBands([25, height], .2);

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

    var color = d3.scale.ordinal()
        .domain(headers)
        .range(["#98ABC5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c"]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickSize(1)
        .tickPadding(15)
        .tickFormat(d3.format(".2s"));

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .tickSize(0)
        .tickPadding(6)
        .orient("left");

    var layer = svg.selectAll(".layer")
        .data(layers)
        .enter().append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) { return color(i); });

    var rect = layer.selectAll("rect")
        .data(function(d) { return d; })
        .enter().append("rect")
        .attr("y", function(d) { return yScale(d.x); })
        .attr("x", 0)
        .attr("height", yScale.rangeBand())
        .attr("width", 0)
        .on("click", function(d) {
             console.log(d);
        });

    rect.transition()
        .delay(function(d, i) { return i * 100; })
        .attr("x", function(d) { return x(d.y0); })
        .attr("width", function(d) { return x(d.y); });

   //********** AXES ************
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text").style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em");

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(0,0)")
        .call(yAxis)
      .append("text")
        .attr({"x": 0 / 2, "y": height+50})
        .attr("dx", ".75em")
        .style("text-anchor", "end")
        .text("Time");


    var legend = svg.selectAll(".legend")
        .data(headers.slice().reverse())
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(-20," + i * 20 + ")"; });

        legend.append("rect")
            .attr("x", width - 18)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", color);

        legend.append("text")
              .attr("x", width - 24)
              .attr("y", 9)
              .attr("dy", ".35em")
              .style("text-anchor", "end")
              .text(function(d) { return d;  });
});
</script>

如何使用D3制作水平堆积条形图

0 个答案: