我正在尝试在每个条形图旁边添加计数(条形图的值),但计数不可见。我尝试为文本添加不透明度甚至z索引以检查它是否与条形图重叠,但它没有帮助。 在检查元素上,我发现标签被包含在内,这导致了问题,任何人都可以引导我,以便我可以更正我的代码。
是否可以更新刷新数据的值?
代码如:jsfiddle link
datasetOption1 = [{
label: "10-20",
value: 22,
count: 22
}, {
label: "20-30",
value: 33,
count: 33
}, {
label: "30-40",
value: 4,
count: 4
}, {
label: "40-50",
value: 15,
count: 15
}, {
label: "50-60",
value: 36,
count: 36
}];
datasetOption2 = [{
label: "Category 1",
value: 10,
count: 11
}, {
label: "Category 2",
value: 20,
count: 3
}, {
label: "Category 3",
value: 30,
count: 41
}, {
label: "Category 4",
value: 5,
count: 17
}, {
label: "Category 5",
value: 12,
count: 9
}, {
label: "Category 6",
value: 23,
count: 33
}];
var chart = document.getElementById("chart");
var margin = {
top: 10,
right: 20,
bottom: 40,
left: 50
},
width = 400,
height = 300;
var div = d3.select(chart).append("div").attr("class", "toolTip");
var formatPercent = d3.format("");
var y = d3.scale.ordinal()
.rangeRoundBands([height, 0], .2, 0.5);
var x = d3.scale.linear()
.range([0, width - 20]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(6)
.tickSize(5)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
//.tickFormat(formatPercent);
var svg = d3.select(chart).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);
d3.select("input[value=\"total\"]").property("checked", true);
function changeAge(dataset) {
var dataMax = d3.max(dataset, function(d) {
return d.count;
});
y.domain(dataset.map(function(d) {
return d.label;
}));
x.domain([0, (dataMax * 1.4)]);
scale = d3.scale.linear()
.domain([0, (dataMax * 1.4)])
.range([0, width - 40 - 10]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + parseInt(height + margin.top + 10) + ")")
.call(xAxis);
svg.select(".y.axis").remove();
svg.select(".x.axis").remove();
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(0)")
.attr("x", 50)
.attr("dx", ".1em")
.style("text-anchor", "end");
/* .text("Option %"); */
var bar = svg.selectAll(".bar")
.data(dataset, function(d) {
return d.label;
});
// new data:
bar.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.count);
})
.attr("y", function(d) {
return y(d.label);
})
.attr("width", function(d) {
return width - x(d.count);
})
.attr("height", y.rangeBand());
//add a value label to the right of each bar
bar.append("text")
.attr("class", "label")
//y position of the label is halfway down the bar
.attr("y", function(d) {
return y(d.label) + y.rangeBand() / 2 + 4;
})
//x position is 3 pixels to the right of the bar
.attr("x", function(d) {
return x(d.count) + 3;
})
.text(function(d) {
return d.count;
});
// removed data:
bar.exit().remove();
// updated data:
bar.transition()
.duration(750)
.attr("x", function(d) {
return 0;
})
.attr("cx", 0)
.attr("y", function(d) {
return y(d.label);
})
.attr("width", function(d) {
return x(d.count);
})
.attr("height", y.rangeBand());
}
changeAge(datasetOption1);
$('#btnChange').on('click', function() {
changeAge(datasetOption2)
})
svg {
width: 100%;
height: 350px;
}
.bar {
fill: rgb(39, 85, 130);
/* fill: #A18FDB; */
}
.axis path,
.axis line {
fill: none;
stroke: #000;
stroke-width: 1px;
shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="chart">
</div>
<button id="btnChange">
change </button>
答案 0 :(得分:2)
您正在使用text
DOM添加rect
DOM,这就是您没有看到文字标签的原因。
解决问题:
组成这样一个组:
bar.enter().append("g")
.attr("class", "bar")
将您的rect
和text
DOM添加到论坛。
最后,对于rect DOM的转换,请从组中选择rect:
bar.selectAll("rect").transition()
.duration(750)
.attr("x", function(d) {
工作代码here