Question

我现在尝试了几件事，但我无法弄清楚为什么我的刻度错误定位。我使用不同的来源制作这个叠加的条形图。

以下是我的代码的小提琴：http://jsfiddle.net/azj7guec/

以下是代码本身：

var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 1000 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

        x = d3.scale.ordinal().rangeRoundBands([0, width], .50);
        y = d3.scale.linear().range([height, 0]);
        z = d3.scale.ordinal().range(["darkblue", "blue", "lightblue"])


        console.log("RAW MATRIX---------------------------");
    // 4 columns: ID,c1,c2,c3
        var matrix = [
            [22,45,34,65],
            [23,66,12,22],
            [24,32,44,76],
            [25,12,76,32],
            [26, 67, 34, 56]
            ];
        console.log(matrix)
        var keys = matrix.map(function(item){return item[0]});

        console.log("REMAP---------------------------");
        var remapped =["c1","c2","c3"].map(function(dat,i){
            return matrix.map(function(d,ii){
                return {x: d[0], y: d[i+1] };
            })
        });
        console.log(remapped)

        console.log("LAYOUT---------------------------");
        var stacked = d3.layout.stack()(remapped)
        console.log(stacked)

        //var yMax= d3.max(stacked)

        x.domain(keys);
        y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);

        // show the domains of the scales
        console.log("x.domain(): " + x.domain())
        console.log("y.domain(): " + y.domain())
        console.log("------------------------------------------------------------------");

        var yAxis = d3.svg.axis()
            .scale(y)
            .ticks(10)

            .orient("left");

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickValues(keys)
            .orient("bottom");

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

     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")
      .attr("transform", function(d) {
        return "rotate(-65)" 
        });


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("Open Issues");

        // Add a group for each column.
        var valgroup = svg.selectAll("g.valgroup")
        .data(stacked)
        .enter().append("g")
        .attr("class", "valgroup")
        .style("fill", function(d, i) { return z(i); })
        .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

        // Add a rect for each date.
        var rect = valgroup.selectAll("rect")
        .data(function(d){return d;})
        .enter().append("rect")
        .attr("width", 20)
        .attr("x", function(d) { return x(d.x); })
        .attr("y", function(d) { return y(d.y0 + d.y); })
        .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
        //.attr("width", x.rangeBand());

希望有人可以帮助我。

Answer 1

序数标度将其输出范围划分为基于输入域的间隔。您当前的定位会将条形放在这些区间的开头，而标记位于中心。要匹配位置，请将间隔的一半减去条形宽度的一半到间隔的开头：

.attr("x", function(d) { return x(d.x) + (x.rangeBand() - 20) / 2; })

完整演示here。

D3 - 滴答错误定位

1 个答案: