Question

我在D3中有以下条形图：bin

我想在y-axis和第一个栏之间添加一点偏移（相应的下一个栏应该相应推）。 x-axis标签也是如此。 0.0应该从x轴上的相同偏移量开始。有办法吗？

理想情况下，它应该如下所示：https://bl.ocks.org/mbostock/3885304

但是此示例使用ordinal缩放并使用rangeRoundBands我认为正在添加该偏移并且我使用linear缩放，因此我不确定如何实现相同的效果。任何帮助表示赞赏。感谢。

Answer 1

只需更改域名即可添加一些填充：

xScale.domain([-0.1, (data.length - 1) * 1.1]);

完整代码：

＆＃13;

var data = [
    {
    amount:100,
    year: "2008"
     }, 
    {
     amount:300,
     year: "2009"
     }, 
    {
     amount:400, 
     year: "2010"
     }, 
    {
     amount:100,
     year: "2011"
     }];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

       // set up scales
        var xScale = d3.scale.linear()
            .range([0, width]);
        xScale.domain([-0.1, (data.length - 1) * 1.1]);

        var yMax = d3.max(data, function(d) { return d.amount; } );
        var yScale = d3.scale.linear()
            .range([height, 0]);
        yScale.domain([0, yMax]).nice();

        // set up axis
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickPadding(10);

        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .tickFormat((d) => d > 10000 ? Math.round(d / 1000000000).toString() + "K" : d);

        // set up svg and chart elements
        var container = d3.select('#chart');
        var svg = container.append("svg")
            .attr("id", "mySVG")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);
        var chart = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // render the axes
        chart.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        chart.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end");

        // render the ractangles
        chart.selectAll(".bar")
            .data(this.data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d, i) { return xScale(i); })
            .attr("width", 50)
            .attr("y", function (d) { return yScale(d.amount); })
            .attr("height", function (d) { return height - yScale(d.amount); });

＆＃13;

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis text {
    font-size: 12px;
    fill: #666;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bar Chart">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
  <div id="chart">

</div>
</body>
</html>

＆＃13;

D3偏移X轴

1 个答案: