Question

我正在学习d3.js但是我无法将图表移动到适合x轴的位置。可能问题是我没有移动图表，我应该移动轴，但是当我尝试做这一切都是一团糟。这就是我所拥有的。

这是代码：

 function createBarChart(allData){
      var xScale = d3.scale.linear()
                      .domain([
                        d3.min(allData, function(d){return d.DATE}),
                        d3.max(allData, function(d){return d.DATE})
                      ])
                      .range([
                        padding+50, w-padding
                      ]);


        var yScale = d3.scale.linear()
                      .domain([ 0, d3.max(allData, function(d){ return d.VALUE})])
                      .range([
                        h-padding+3, padding
                      ]);

       var xAxisGen = d3.svg.axis().scale(xScale).orient('bottom'); 
       var yAxisGen = d3.svg.axis().scale(yScale).orient('left').ticks(10);

       var svg = d3.select("body").append("svg").attr({"width": w, "height": h  });

       var yAxis = svg.append("g").call(yAxisGen).attr("class", "axis")
                       .attr("transform", "translate(" + 70 +")");
       var xAxis = svg.append("g").call(xAxisGen).attr("class", "axis")
                      .attr("transform", "translate(0," + (h-padding) +")");

        svg.selectAll("rect")
          .data(allData)
          .enter()
          .append("rect")
        .attr({
          x: (function (d) { return xScale(d.DATE); }),
          y: (function (d) { return yScale(d.VALUE); }),
          width: "8px",
          height: function(d){ return d.VALUE; },
          "fill": "#5CACEE"
        });

      };

这是codepen上的项目。 http://codepen.io/DiazPedroAbel/pen/wzovdK?editors=0010

Answer 1

简短回答：你添加的每个矩形的高度也应该是从一般高度中减去yScale函数的乘积（就其垂直标度而言）。

所以不要这样 height: function(d){ return d.VALUE; }

使用 height: function(d){ return h - padding - yScale(d.VALUE); }

如何将条形图移动一点点

1 个答案: