Question

我的D3条形图没有显示标签文本的正确数量。好像有点偏，我不确定为什么。

我正在尝试让文本标签显示newNumber在数据集中的内容。

这是我正在使用的代码：

	    var w = 800;
		var h = 600;
		var padding = 5;
		var maxNumber = 100;

		//Generate random numbers
		var dataset = [];
            for (var i = 0; i < 21; i++) {
            	var newNumber = Math.random() * maxNumber;
            	dataset.push(newNumber);
            }

        var xScale = d3.scale.ordinal()
			.domain(d3.range(dataset.length))
			.rangeRoundBands([padding, w - padding], 0.05);

		var yScale = d3.scale.linear()
			.domain([d3.max(dataset), 0])
			.range([padding, h - padding]);

		var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient("bottom");

		var yAxis = d3.svg.axis()
			.scale(yScale)
			.orient("left");

		var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);

		svg.selectAll("rect")
				.data(dataset)
				.enter()
				.append("rect")
				.attr("x", function(d, i) {
					return xScale(i) + padding;
				})
				.attr("y", function(d) {
					return h - yScale(d) - padding - 15;
				})
				.attr("width", xScale.rangeBand())
				.attr("fill", "rgba(95, 159, 229, 0.3");

		svg.selectAll("rect")
				.data(dataset)
				.transition().delay(function(d, i) {
				    return i / dataset.length * 800;
				})
				.duration(1500)
				.ease("linear")
				.attr("y", function(d) {
					return h - yScale(d) - padding - 15;
				})
				.attr("height", function(d) {
					return yScale(d);
				});

			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return Math.floor(d3.max(dataset) - d);
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return xScale(i) + padding + 15;
			   })
			   .attr("y", function(d) {
			   		return h - yScale(d) - padding - 20;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")

		svg.append("g")
			.attr("class", "xAxis")
			.attr("transform", "translate(0," + (h - padding - 15) + ")")
			.call(xAxis);

		svg.append("g")
			.attr("class", "yAxis")
			.attr("transform", "translate(" + (padding + 15) + ",0)")
			.call(yAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: BDAS Bar Chart Test</title>

		<style>
			svg {
				padding-left: 15px;
				padding-top: 30px;
			}

			rect {
				transition: 0.1s;
			}
			rect:hover {
				fill: rgba(95, 159, 229, 1);
			}

			.xAxis path, .yAxis path {
				fill: #aaa;
				height: 0.5px;
			}

			.xAxis .tick text, .yAxis .tick text {
				font-family: sans-serif;
				fill: #aaa;
				font-size: 15px;
			}
		</style>
	</head>
	<body>

	</body>
</html>

Answer 1

我看了你的编码并稍微改了一下它现在应该可以工作了。

   var w = 800 ;
    var h = 600 ;
    var padding = 20;

    //Generate random numbers
    var dataset = [];
        for (var i = 0; i < 21; i++) {
            var newNumber = Math.random() *100;
            dataset.push(newNumber);
        }

    var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([padding, w - padding], 0.05);

    var yScale = d3.scale.linear()
        .domain([0,d3.max(dataset)])
        .range([h - padding,padding]);

    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");

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

    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", function(d, i) { return xScale(i);})
            .attr("y", function(d) {return yScale(d);})
            .attr("width", xScale.rangeBand())
            .attr("fill", "rgba(95, 159, 229, 0.3")
            .attr("height", function(d) { return h - yScale(d) - padding; });

    svg.selectAll("rect")
            .data(dataset)
            .transition().delay(function(d, i) { return i / dataset.length * 800;})
            .duration(1500)
            .ease("linear")
            .attr("y", function(d) { return yScale(d);})
            .attr("height", function(d) { return h - yScale(d) - padding; });

        svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                return Math.floor(d);
           })
           .attr("text-anchor", "middle")
           .attr("x", function(d, i) {
                return (xScale(i)+15);
           })
           .attr("y", function(d) {
                console.log(h-yScale(d))
                return (yScale(d)-padding) ;
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")

    svg.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(0," + (h-padding) + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "yAxis")
        .attr("transform", "translate(" + (padding + 10) + ",0)")
        .call(yAxis);

D3标签文字金额略有偏差

1 个答案: