我正在尝试使用D3.Js将Text / Label添加到条形图中的条形图中。我的文本正在追加，但是从第二个索引数据中跳过了第一个索引，我不知道为什么这样做。我调试了dat，数据正确显示了。
function revenueBar(localDataJson) {
var w = 400;
var h = 400;
var barPadding = 1;
var maxRevenue = 0;
var maxTurnOver = 0;
var padding = {
left: 45, right: 10,
top: 40, bottom: 60
}
var maxWidth = w - padding.left - padding.right;
var maxHeight = h - padding.top - padding.bottom;
for (var j = 0; j < localDataJson.length; j++) {
if (localDataJson[j].Revenue > maxRevenue) {
maxRevenue = localDataJson[j].Revenue;
}
}
for (var j = 0; j < localDataJson.length; j++) {
if (localDataJson[j].TurnOver > maxTurnOver) {
maxTurnOver = localDataJson[j].TurnOver;
}
}
var convert = {
x: d3.scale.ordinal(),
y: d3.scale.linear()
};
// Define your axis
var axis = {
x: d3.svg.axis().orient('bottom')
//y: d3.svg.axis().orient('left')
};
// Define the conversion function for the axis points
axis.x.scale(convert.x);
// axis.y.scale(convert.y);
// Define the output range of your conversion functions
convert.y.range([maxHeight, 0]);
convert.x.rangeRoundBands([0, maxWidth]);
convert.x.domain(localDataJson.map(function (d) {
return d.Country;
})
);
convert.y.domain([0, maxRevenue]);
$('#chartBar').html("");
var svg = d3.select("#chartBar")
.append("svg")
.attr("width", w)
.attr("height", h);
// The group node that will contain all the other nodes
// that render your chart
$('.bar-group').html("");
var chart = svg.append('g')
.attr({
class: 'container',
transform: function (d, i) {
return 'translate(' + padding.left + ',' + padding.top + ')';
}
});
chart.append('g') // Container for the axis
.attr({
class: 'x axis',
transform: 'translate(0,' + maxHeight + ')'
})
.call(axis.x)
.selectAll("text")
.attr("x", "-.8em")
.attr("y", ".15em")
.style("text-anchor", "end")
.attr("transform", "rotate(-65)");// Insert an axis inside this node
$('.axis path').css("fill", "none");
chart.append('g') // Container for the axis
// .attr({
// class: 'y axis',
// height: maxHeight,
// })
//.call(axis.y);
var bars = chart
.selectAll('g.bar-group')
.data(localDataJson)
.enter()
.append('g') // Container for the each bar
.attr({
transform: function (d, i) {
return 'translate(' + convert.x(d.Country) + ', 1)';
},
class: 'bar-group'
});
var color = d3.scale.ordinal()
.range(['#f1595f', '#79c36a', '#599ad3', '#f9a65a', '#9e66ab','#cd7058']);
bars.append('rect')
.attr({
y: maxHeight,
height: 0,
width: function (d) { return convert.x.rangeBand(d) - 3; },
class: 'bar'
})
.transition()
.duration(1500)
.attr({
y: function (d, i) {
return convert.y(d.Revenue);
},
height: function (d, i) {
return maxHeight - convert.y(d.Revenue);
}
})
.attr("fill", function (d, i) {
return color(i);
})
var svgs = svg.selectAll("g.container")
// svgs.selectAll("text")
.data(localDataJson)
.enter()
.append("text")
//.transition() // <-- This is new,
// .duration(5000)
.text(function (d) {
return (d.Revenue);
})
.attr("text-anchor", "middle")
//// Set x position to the left edge of each bar plus half the bar width
.attr("x", function (d, i) {
return (i * (w / localDataJson.length)) + ((w / localDataJson.length - barPadding) / 2);
})
.attr({
y: function (d, i) {
return convert.y(d.Revenue) +70;
},
height: function (d, i) {
return maxHeight - convert.y(d.Revenue);
}
})
.attr("font-family", "sans-serif")
.attr("font-size", "13px")
.attr("fill", "white")
}
我的数据是：
localdatajson=[
{"Country";"USA","Revenue":"12","TurnOver":"16"},
{"Country";"Brazil","Revenue":"4.5","TurnOver":"16"},
{"Country";"Belzium","Revenue":"4.8","TurnOver":"16"},
{"Country";"Britain","Revenue":"20","TurnOver":"16"},
{"Country";"Canada","Revenue":"6.5","TurnOver":"16"},
{"Country";"DenMark","Revenue":"7.5","TurnOver":"16"}
]
问题是文本正在追加，但是在第一个之后，即，它转义了Revenue 12，并从第二个追加了“ 4.5”
请帮忙。
问题是文本正在追加，但是在第一个之后，即，它转义了Revenue 12，并从第二个追加了“ 4.5”
这是因为您当前添加text元素的块具有
var svgs = svg.selectAll("g.container")
.data(localDataJson)
.enter()
...
这意味着它会g.container在svg中搜索元素，并尝试将每个localDataJson元素链接到对应的元素（localDataJson为无法找到对应元素的额外元素添加新g.container元素）。
由于您只有一个g.container元素，因此它将第一个元素链接到该元素，然后text为其余元素添加新元素。
你想这样做
var svgs = svg.select("g.container").selectAll("text.label")
.data(localDataJson)
.enter()
.append("text")
.classed("label", true)
...
而是将文本元素匹配g.container到数据数组中，并为每个额外的元素添加一个新元素。
请注意，我们使用.label并添加了该类label-这是因为我们想将其与数据标签的文本元素进行匹配（不是说，我们为x轴标签添加的文本元素）
虽然这可以解决问题，但是您可能需要在x和y坐标中对标签进行一些更正，并且实际上不需要为标签设置宽度
...
.attr("x", function (d, i) {
return convert.x(d.Country) + (convert.x.rangeBand(d) - 3) / 2;
})
.attr("y", function (d, i) {
return maxHeight;
})
...
我将其设置为maxHeight只是为了显示它的工作原理-条形的高度实际上不正确，因为您的y比例尺有问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句