代码之家 › 专栏 › 技术社区 › maxbre

d3.js条形图不正确对齐

d3.js html javascript

maxbre · 技术社区 · 8 年前

拜托,有什么帮助吗?

抱歉,新手

谢谢

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>my example barchart</title>
</head>
<h1>test barchart</h1>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script type="text/javascript">
// y levels
var yLevel = [0.102, 0.739, 0.851, 0.851, 1.107, 1.274, 1.205, 1.044, 1.082, 0.671, 1.322, 0.121, 7.827, 3.012, 0.912, 1.065, 0.152, 2.681 ];

//max value
var yLevelMax = d3.max(yLevel);

var inquinante = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R'];

var margin = { top: 50, right: 50, bottom: 260, left: 50 };

var graphWidth = 800, graphHeight = 500;

var totalWidth = graphWidth + margin.left + margin.right;

var totalHeight = graphHeight + margin.top + margin.bottom;

var axisPadding = 10;

var svg = d3.select('body')
            .append('svg')
            .attr({ width: totalWidth, height: totalHeight });

var mainGroup = svg
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ")");


var bands = d3.scale.ordinal()
					.domain(yLevel)
					.rangeBands([0, graphWidth], 0.05);

var yScale = d3.scale
                .linear()
                .domain([0, yLevelMax])
                .range([0, graphHeight]);

// not exactly understand this
function translator(d, i) {
        return "translate(" + bands.range()[i] + "," +  (graphHeight - yScale(d)) + ")";
            }

var barGroup = mainGroup.selectAll('g')
                .data(yLevel)
                .enter()
                .append('g')
                .attr('transform', translator);

barGroup.append('rect')
            .attr({
                 fill: 'steelblue',
                 width: bands.rangeBand(),
                 height: function(d) { return yScale(d); }
                });

barGroup.append('text')
            .text(function(d) { return d; })
            .style('text-anchor', 'start')
            .attr({
                    dx: 10,
                    dy: -10,
                    transform: 'rotate(90)',
                    fill: 'white'
            });

var leftAxisGroup = svg.append('g');
            leftAxisGroup.attr({
                transform: 'translate(' + (margin.left - axisPadding) + ',' +
                                            margin.top + ')'
            });

var yAxisScale = d3.scale
            .linear()
            .domain([yLevelMax, 0])
            .range([0, graphHeight]);

var leftAxis = d3.svg.axis()
            .orient('left')
            .scale(yAxisScale);

var leftAxisNodes = leftAxisGroup.call(leftAxis);

styleAxisNodes(leftAxisNodes);

var bottomAxisScale = d3.scale.ordinal()
                .domain(inquinante)
                .rangeBands([axisPadding, graphWidth + axisPadding]);

            var bottomAxis = d3.svg
                .axis()
                .scale(bottomAxisScale)
                .orient("bottom");

            var bottomAxisX = margin.left - axisPadding;
            var bottomAxisY = totalHeight - margin.bottom + axisPadding;

            var bottomAxisGroup = svg.append("g")
                .attr({ transform: 'translate(' + bottomAxisX + ',' + bottomAxisY + ')' });

            var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);
            styleAxisNodes(bottomAxisNodes);

            bottomAxisNodes.selectAll("text")
                .style('text-anchor', 'start')
                .attr({
                    dx: 10,
                    dy: -5,
                    transform: 'rotate(90)'
                });

            function styleAxisNodes(axisNodes) {
                axisNodes.selectAll('.domain')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });
                axisNodes.selectAll('.tick line')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });

                }




</script>

</body>
</html>

1 回复 | 直到 8 年前

rioV8 8 年前

不要将y值用作x轴的域。

它们可以包含双值,就像您的例子一样。

yLevel , inquinante ,那么你确定他们永远匹配吗

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>my example barchart</title>
</head>
<h1>test barchart</h1>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script type="text/javascript">
// y levels
var yLevel = [0.102, 0.739, 0.851, 0.851, 1.107, 1.274, 1.205, 1.044, 1.082, 0.671, 1.322, 0.121, 7.827, 3.012, 0.912, 1.065, 0.152, 2.681 ];

//max value
var yLevelMax = d3.max(yLevel);

var inquinante = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R'];

var margin = { top: 50, right: 50, bottom: 260, left: 50 };

var graphWidth = 800, graphHeight = 500;

var totalWidth = graphWidth + margin.left + margin.right;

var totalHeight = graphHeight + margin.top + margin.bottom;

var axisPadding = 10;

var svg = d3.select('body')
            .append('svg')
            .attr({ width: totalWidth, height: totalHeight });

var mainGroup = svg
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ")");


var bands = d3.scale.ordinal()
					.domain(inquinante)
					.rangeBands([0, graphWidth], 0.05);

var yScale = d3.scale
                .linear()
                .domain([0, yLevelMax])
                .range([0, graphHeight]);

console.log('trans', bands.range());

// not exactly understand this
function translator(d, i) {
console.log('trans', i, bands.range()[i]);
        return "translate(" + bands.range()[i] + "," +  (graphHeight - yScale(d)) + ")";
            }

var barGroup = mainGroup.selectAll('g')
                .data(yLevel)
                .enter()
                .append('g')
                .attr('transform', translator);

barGroup.append('rect')
            .attr({
                 fill: 'steelblue',
                 width: bands.rangeBand(),
                 height: function(d) { return yScale(d); }
                });

barGroup.append('text')
            .text(function(d) { return d; })
            .style('text-anchor', 'start')
            .attr({
                    dx: 10,
                    dy: -10,
                    transform: 'rotate(90)',
                    fill: 'white'
            });

var leftAxisGroup = svg.append('g');
            leftAxisGroup.attr({
                transform: 'translate(' + (margin.left - axisPadding) + ',' +
                                            margin.top + ')'
            });

var yAxisScale = d3.scale
            .linear()
            .domain([yLevelMax, 0])
            .range([0, graphHeight]);

var leftAxis = d3.svg.axis()
            .orient('left')
            .scale(yAxisScale);

var leftAxisNodes = leftAxisGroup.call(leftAxis);

styleAxisNodes(leftAxisNodes);

var bottomAxisScale = d3.scale.ordinal()
                .domain(inquinante)
                .rangeBands([axisPadding, graphWidth + axisPadding]);

            var bottomAxis = d3.svg
                .axis()
                .scale(bottomAxisScale)
                .orient("bottom");

            var bottomAxisX = margin.left - axisPadding;
            var bottomAxisY = totalHeight - margin.bottom + axisPadding;

            var bottomAxisGroup = svg.append("g")
                .attr({ transform: 'translate(' + bottomAxisX + ',' + bottomAxisY + ')' });

            var bottomAxisNodes = bottomAxisGroup.call(bottomAxis);
            styleAxisNodes(bottomAxisNodes);

            bottomAxisNodes.selectAll("text")
                .style('text-anchor', 'start')
                .attr({
                    dx: 10,
                    dy: -5,
                    transform: 'rotate(90)'
                });

            function styleAxisNodes(axisNodes) {
                axisNodes.selectAll('.domain')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });
                axisNodes.selectAll('.tick line')
                    .attr({
                        fill: 'none',
                        'stroke-width': 1,
                        stroke: 'black'
                    });

                }




</script>

</body>
</html>