javascript - 背景栏扭曲

Question

我的代码适用于预定义的值 here .但是，如果我将值更改为不同的值，背景栏将变为 distorted and misplaced to wrong location .

我该如何解决这个问题？

jsFiddle

D3代码:

var data = [
    {
        "episode": "Ep. 01",
        "donations": "100",
        "ngo": "abc",
        "bar_color": "#B3DA29",
        "shadow_color": "#708125"
    },
    {
        "episode": "Ep. 02",
        "donations": "388.98",
        "ngo": "abc",
        "bar_color": "#78C0F2",
        "shadow_color": "#3E7FA5"
    },
    {
        "episode": "Ep. 03",
        "donations": "6030.00",
        "ngo": "abc",
        "bar_color": "#9B58B5",
        "shadow_color": "#5A3E6F"
    },
    {
        "episode": "Ep. 04",
        "donations": "407.70",
        "ngo": "abc",
        "bar_color": "#E54C3C",
        "shadow_color": "#B4320E"
    },
    {
        "episode": "Ep. 05",
        "donations": "210.00",
        "ngo": "abc",
        "bar_color": "#F2519D",
        "shadow_color": "#BD3F7F"
    },
    {
        "episode": "Ep. 06",
        "donations": "100",
        "ngo": "abc",
        "bar_color": "#B3DA29",
        "shadow_color": "#708125"
    },
    {
        "episode": "Ep. 07",
        "donations": "388.98",
        "ngo": "abc",
        "bar_color": "#78C0F2",
        "shadow_color": "#3E7FA5"
    },
    {
        "episode": "Ep. 08",
        "donations": "603.00",
        "ngo": "abc",
        "bar_color": "#9B58B5",
        "shadow_color": "#5A3E6F"
    },
    {
        "episode": "Ep. 09",
        "donations": "407.70",
        "ngo": "abc",
        "bar_color": "#E54C3C",
        "shadow_color": "#B4320E"
    },
    {
        "episode": "Ep. 10",
        "donations": "210.00",
        "ngo": "abc",
        "bar_color": "#F2519D",
        "shadow_color": "#BD3F7F"
    }
];

var margin = {top: 100, right: 20, bottom: 60, left: 40},
    width = 500 - margin.left - margin.right,
    height = 355 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(10,10);

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

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 + ")");

defs = svg.append('svg:defs');

defs
.append('svg:pattern')
.attr('id', 'stripe_bg')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', '8')
.attr('height', '8')
.append('svg:image')
.attr('xlink:href', 'http://snag.gy/vLMrD.jpg')
.attr('x', 0)
.attr('y', 0)
.attr('width', 8)
.attr('height', 8);


x.domain(data.map(function(d) { return d.episode; }));
y.domain([0, d3.max(data, function(d) { return d.donations; })]);

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width / 2 )
.attr("y", margin.bottom - 5);

//Create Y Axis     
svg.append("g")
.attr("class", "y axis")
.call(yAxis);

var tooltip = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

//var total = d3.sum(data, function(d) { return d.donations; })


svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll(".tick text")
.call(wrap, x.rangeBand());

svg.selectAll(".ellipse")
.data(data)
.enter()
.append("ellipse")
.attr("cx", function(d) { return x(d.episode) + 17; })
.attr("cy", function(d) { return y(0); })
.attr("rx", 20)
.attr("ry", 5)
.style("fill", function(d) { return d.shadow_color; })

svg.selectAll(".backgound-bar")
.data(data)
.enter()
.append("rect")
.attr("class", "background-bar")
.attr("x", function(d) { return x(d.episode); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(800); })
.attr("height", 258)
.style("fill", "url(#stripe_bg)")
.attr("rx", 10)
.attr("ry", 10);

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.episode); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.donations); })
.attr("height", function(d) { return height - y(d.donations); })
.style("fill", function(d) { return d.bar_color; })
.attr("rx", 10)
.attr("ry", 10)
.on("mouseover", function(d) {      
    tooltip.transition().duration(200).style("opacity", .9);      
    tooltip.html("NGO: " + d.ngo)  
    .style("left", (d3.event.pageX) + "px")     
    .style("top", (d3.event.pageY - 28) + "px");    
})                  
.on("mouseout", function(d) {       
    tooltip.transition().duration(500).style("opacity", 0);   
});

/*svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("transform", function(d, i) {
    return "translate(" + (35 + x(d.episode)) + ", 180)" + "rotate(-90)"
})
.text(function(d) { return d.episode; })
.style("font-family", 'Arial, "Helvetica Neue", Helvetica, sans-serif')
.style("fill", "white");*/

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

Answer 1

条纹背景条的高度和位置是硬编码的(不依赖于数据)，看看你的代码:

.attr("y", function(d) { return y(800); })
.attr("height", 258)

尝试将其替换为:

.attr("y", 0)
.attr("height", height)