Question

我正在尝试将标准和反向条形图联合起来。我目前的方式是创建两个单独的图形，然后对齐一个底部和另一个顶部。问题是我似乎无法正确对齐它们。我相信有更好的方法来解决这个问题。我考虑将其中一个数据量解析为负数，然后在屏幕上显示正数。这个方向将涉及首先堆叠杆，我可以做到最重要。我只是不确定如何为正数据值创建负空间，这就是为什么我要做两个单独的图。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>

  .axis text {
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
  }
  .axis .label {
    font-size: 20pt;
  }

  .x.axis path, .x.axis line {
    stroke-width:2;
    stroke: #EBEBED; 
    shape-rendering: crispEdges;
  }
    .x.axis text{ font-weight: 500; transform:translate(0px,14px);stroke:#c7c7c7}
</style>
</head>
<body>

  <script>
 var outerWidth = 500;
  var outerHeight = 120;
  var margin = { left: 90, top: 30, right: 30, bottom: 0 };
  var barPadding = 0.2;

  var xColumn = "date";


    var yColumn = "amount";

  var colorColumn = "barv";
  var layerColumn = colorColumn;

  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;



  var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
  var yAxisG = g.append("g")
    .attr("class", "y axis");

  var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
  var yScale = d3.scale.linear().range([innerHeight,0]).nice();
  var colorScale = d3.scale.ordinal()
        .domain(["top"])
        .range([ "#43B365" ])





  var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .outerTickSize(0).ticks(0).tickSize(0);
  var yAxis = d3.svg.axis().scale(yScale).orient("left")
    .ticks(0)
    .outerTickSize(0);

  function render(data){

    var nested = d3.nest()
      .key(function (d){ return d[layerColumn]; })
      .entries(data)

    var stack = d3.layout.stack()
      .y(function (d){ return d[yColumn]; })
      .values(function (d){ return d.values; });

    var layers = stack(nested);

    xScale.domain( data.map( function (d){ return d[xColumn]; }));

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

    colorScale.domain(layers.map(function (layer){
      return layer.key;
    }));

    xAxisG.call(xAxis);
    yAxisG.call(yAxis);

    var layerGroups = g.selectAll(".layer").data(layers);
    layerGroups.enter().append("g").attr("class", "layer");
    layerGroups.exit().remove();
    layerGroups.style("fill", function (d){
      return colorScale(d.key);
    });

    var bars = layerGroups.selectAll("rect").data(function (d){
      return d.values;
    });
    bars.enter().append("rect")
    bars.exit().remove();
    bars
      .attr("x", function (d){ return xScale(d[xColumn]); })
      .attr("y", function (d){ return yScale(d.y0 + d.y); })
      .attr("width", xScale.rangeBand()*.2)
      .attr("height", function (d){ return innerHeight - yScale(d.y); })
      .attr("ry", 2);

      var texty = g.selectAll("text.bar").data(data);
    texty.enter().append("text")
        .attr("class", "bar")
        .attr("text-anchor", "middle")
        .attr("x", function(d) { return xScale(d.date); })
        .attr("y", function(d) { return yScale(d.amount) - 10; })
        .text(function(d) { return d.amount; });  
  }

  var data = [
    {
      "date": "5/1/16",
      "amount": 1098,
      "barv": "top"
    },
    {
      "date": "5/8/16",
      "amount": 30,
      "barv": "top"
    },
    {
      "date": "5/16/16",
      "amount": 2504,
      "barv": "top"
    },
    {
      "date": "5/24/16",
      "amount": 560,
      "barv": "top"
    }
  ];

  render(data);


    //*****SECOND PART

    var outerWidth = 500;
  var outerHeight = 100;
  var margin = { left: 90, top: -10, right: 30, bottom: 40 };
  var barPadding = 0.2;

  var xColumn = "date";

    var yColumn = "amount";

  var colorColumn = "barv";
  var layerColumn = colorColumn;

  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;



  var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
  var yAxisG = g.append("g")
    .attr("class", "y axis");

  var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
  var yScale = d3.scale.linear().range([0,innerHeight]).nice();
  var colorScale = d3.scale.ordinal()
        .domain(["bot"])
        .range(["#DA5A60" ])




  var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .outerTickSize(0).ticks(0).tickSize(0);
  var yAxis = d3.svg.axis().scale(yScale).orient("left")
    .ticks(0)
    .outerTickSize(0);

  function renders(data){

    var nested = d3.nest()
      .key(function (d){ return d[layerColumn]; })
      .entries(data)

    var stack = d3.layout.stack()
      .y(function (d){ return d[yColumn]; })
      .values(function (d){ return d.values; });

    var layers = stack(nested);

    xScale.domain( data.map( function (d){ return d[xColumn]; }));

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

    colorScale.domain(layers.map(function (layer){
      return layer.key;
    }));

    xAxisG.call(xAxis);
    yAxisG.call(yAxis);

    var layerGroups = g.selectAll(".layer").data(layers);
    layerGroups.enter().append("g").attr("class", "layer");
    layerGroups.exit().remove();
    layerGroups.style("fill", function (d){
      return colorScale(d.key);
    });

    var bars = layerGroups.selectAll("rect").data(function (d){
      return d.values;
    });
    bars.enter().append("rect")
    bars.exit().remove();
    bars
      .attr("x", function (d){ return xScale(d[xColumn]); })
      .attr("y", 0)
      .attr("width", xScale.rangeBand()*.2)
     .attr("height", function (d){ return   yScale(d[yColumn]); })
      .attr("ry", 2);


      var texty = g.selectAll("text.bar").data(data);
    texty.enter().append("text")
        .attr("class", "bar")
        .attr("text-anchor", "middle")
        .attr("x", function(d) { return xScale(d.date); })
        .attr("y", function(d) { return yScale(d.amount) - 10; })
        .text(function(d) { return d.amount; }); 
  }

  var data = [
    {
      "date": "5/1/16",
      "amount": 34,
      "barv": "bot"
    },
    {
      "date": "5/8/16",
      "amount": 12,
      "barv": "bot"
    },
    {
      "date": "5/16/16",
      "amount": 47,
      "barv": "bot"
    },
    {
      "date": "5/24/16",
      "amount": 11,
      "barv": "bot"
    }
  ];

  renders(data);


</script>
</body>

以下是我尝试实施的一些资源但没有成功。 http://jsfiddle.net/philgyford/LjxaV/2/ http://jsfiddle.net/chrisJamesC/tNdJj/4/ http://jsfiddle.net/5hzxegxx/2/ http://bl.ocks.org/larskotthoff/601c66edfb83a11cf2bb 感谢

更新我更新了代码。我能够找出对齐问题和出现的文字。唯一的问题是刻度标签未正确对齐条形图，并且图形之间仍有空间。

d3反向＆amp;标准条形图外观

0 个答案: