背景条扭曲 [英] Background bar distorting
本文介绍了背景条扭曲的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码适用于定义的值此处。
然而，如果我将值更改为不同的值，后台栏会获得扭曲和错位位置。
My code works properly for perdefined values here. However, if I change the values to something different, the background bar gets distorted and misplaced to wrong location.
如何解决此问题？
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);
}
}
});
}
推荐答案
条纹背景栏是硬编码的（不依赖于数据），请查看您的代码：
The height and position of your striped background bars is hard-coded (does not depend on data), take a look at your code:
.attr("y", function(d) { return y(800); })
.attr("height", 258)
$ b b
尝试替换它：
Try replacing it with:
.attr("y", 0)
.attr("height", height)
这篇关于背景条扭曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
