d3 中的条形位置与轴不匹配

【问题标题】：Bar position in d3 is not matching with axisd3 中的条形位置与轴不匹配
【发布时间】：2018-12-12 08:48:27
【问题描述】：

我有一个使用d3js 制作的条形图，我无法将条形图正确定位在 x 轴上。条形图未相对于轴 ticks 定位。

以下是相同的sn-p。

var width = 216;
var height = 200;
var barPadding = 18;
var barWidth = 58;
var dataSize = d3.selectAll(dataset).size();
var margin = { top: 10, right: 0, bottom: 58, left: 30 };
var width_box_sizing_border_box = width + margin.left + margin.right;
var height_box_sizing_border_box = height + margin.bottom + margin.top;
//var start = (width - margin.left - margin.right - (dataSize * barWidth) + barPadding) / 2;

var graph;
var xScale;
var yScale;
var dataset;

var xTicks = 6;
var yTicks = 6;

dataset = [{ desc: 'test1', val: 40 }, { desc: 'some dummy text here', val: 120 }];

xScale = d3.scaleBand()
    .domain(dataset.map(function (d) {
        return d.desc;
    }))
    .range([margin.left, width-margin.right]);

yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0, 350]);

graph = d3.select("#graph")
    .append("svg")
    .attr("class", "bar-chart")
    .attr("width", width_box_sizing_border_box)
    .attr("height", height_box_sizing_border_box)

graph.append("g")
    .attr("class", "x-scale")
    .attr("transform", "translate(0," + (height + margin.top) + ")")
    .call(d3.axisBottom(xScale).ticks(xTicks))
    .selectAll(".tick text")
    .call(wrap, xScale.bandwidth());

graph.append("g")
    .attr("class", "y-scale")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.axisLeft(yScale).ticks(yTicks).tickPadding(10));

graph
    .append("g")
    .attr("transform", "translate(0," + margin.top + ")")
    .attr('class', 'graph-placeholder')
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar1")
    .attr("height", height)
    .attr("width", barWidth - barPadding)
    .attr('x', d => xScale(d.desc));

graph
    .append("g")
    .attr("transform", "translate(0," + margin.top + ")")
    .attr('class', 'graph-main')
    .selectAll("bar1")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar2")
    .attr('x', d => xScale(d.desc))
    .attr("y", function (d) {
        return yScale(d.val);
    })
    .attr("height", function (d) {
        return height - yScale(d.val);
    })
    .attr("width", barWidth - barPadding);


graph
    .append("g")
    .attr("transform", "translate(0," + margin.top + ")")
    .attr('class', 'bar-label')
    .selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(d => d.val + '%')
    .attr('x', d => xScale(d.desc))
    .attr("y", function (d) {
        return yScale(d.val) - 5;
    })

function wrap(text, width) {
    text.each(function () {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1,
            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);
            }
        }
    });
}
.bar-chart {
  background-color: #ccc;
}

.bar2 {
  fill: steelblue;
}

.bar1 {
  fill: #f2f2f2;
}

text {
  font-size: 12px;
  text-anchor: middle;
}

.bar-label text {
  text-anchor: start;
}
path.domain {
  stroke-width: 0;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
  <div id="graph"></div>
</div>

【问题讨论】：

  • 就像我在你之前的问题中提到的，修复你的保证金使用
  • @rioV8 你能解释一下保证金问题吗？
  • 查看 Mike 为 d3v5 编写的任何条形线图示例

标签： javascript html css d3.js


【解决方案1】：

这是计算中心点以放置条形/文本的方法

条形图和文字： xScale.bandwidth()/2 - barWidth/2

文本在条形内居中的额外偏移量： 分配文本属性后，根据 barWidth 和此特定文本宽度定位文本（即x）。

简而言之：barWidth/2 - textWidth/2，为此您可以使用getBBox 方法。方法如下：

.attr('x', function (d) {
    return xScale(d.desc) + ((barWidth - barPadding)/2 - d3.select(this).node().getBBox().width/2);
});

将上述 2 项更改应用于您的图表，这是您的 fiddle 的一个分支（和一个内联 sn-p）

var width = 216;
var height = 200;
var barPadding = 18;
var barWidth = 58;
var dataSize = d3.selectAll(dataset).size();
var margin = { top: 10, right: 0, bottom: 58, left: 30 };
var width_box_sizing_border_box = width + margin.left + margin.right;
var height_box_sizing_border_box = height + margin.bottom + margin.top;
//var start = (width - margin.left - margin.right - (dataSize * barWidth) + barPadding) / 2;

var graph;
var xScale;
var yScale;
var dataset;

var xTicks = 6;
var yTicks = 6;

dataset = [{ desc: 'test1', val: 40 }, { desc: 'some dummy text here', val: 120 }];

xScale = d3.scaleBand()
    .domain(dataset.map(function (d) {
        return d.desc;
    }))
    .range([margin.left, width-margin.right]);

yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0, 350]);

graph = d3.select("#graph")
    .append("svg")
    .attr("class", "bar-chart")
    .attr("width", width_box_sizing_border_box)
    .attr("height", height_box_sizing_border_box)

graph.append("g")
    .attr("class", "x-scale")
    .attr("transform", "translate(0," + (height + margin.top) + ")")
    .call(d3.axisBottom(xScale).ticks(xTicks))
    .selectAll(".tick text")
    .call(wrap, xScale.bandwidth());

graph.append("g")
    .attr("class", "y-scale")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.axisLeft(yScale).ticks(yTicks).tickPadding(10));

graph
    .append("g")
    .attr("transform", "translate(" + (xScale.bandwidth()/2 - (barWidth - barPadding)/2) + "," + margin.top + ")")
    .attr('class', 'graph-placeholder')
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar1")
    .attr("height", height)
    .attr("width", barWidth - barPadding)
    .attr('x', d => xScale(d.desc));

graph
    .append("g")
    .attr("transform", "translate(" + (xScale.bandwidth()/2 - (barWidth - barPadding)/2) + "," + margin.top + ")")
    .attr('class', 'graph-main')
    .selectAll("bar1")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar2")
    .attr('x', d => xScale(d.desc))
    .attr("y", function (d) {
        return yScale(d.val);
    })
    .attr("height", function (d) {
        return height - yScale(d.val);
    })
    .attr("width", barWidth - barPadding);


graph
    .append("g")
    .attr("transform", "translate(" + (xScale.bandwidth()/2 - (barWidth - barPadding)/2) + "," + margin.top + ")")
    .attr('class', 'bar-label')
    .selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(d => d.val + '%')
    .attr("y", function (d) {
        return yScale(d.val) - 5;
    }).attr('x', function (d) {
    	return xScale(d.desc) + ((barWidth - barPadding)/2 - d3.select(this).node().getBBox().width/2);
    });

function wrap(text, width) {
    text.each(function () {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1,
            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);
            }
        }
    });
}
.bar-chart {
  background-color: #ccc;
}

.bar2 {
  fill: steelblue;
}

.bar1 {
  fill: #f2f2f2;
}

text {
  font-size: 12px;
  text-anchor: middle;
}

.bar-label text {
  text-anchor: start;
}
path.domain {
  stroke-width: 0;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
  <div id="graph"></div>
</div>

小提琴链接：http://jsfiddle.net/xsuL8q4j/

希望这会有所帮助。

【讨论】：

  • 几乎得到了我想要的。有没有办法让条之间的填充保持不变（18）？
  • 如果这是一个常数值，图表会与小宽度内的较大数据集或大宽度内的小数据集混淆。您可以随时使用轴填充。 (here's文档)
  • 我有固定长度的数据集。谢谢。
  • 我看过文档，但值的范围是 [0, 1]。所以 18 作为填充是不可能的吧？
  • 好的，我试一试。如果我没有得到，我会发布一个新问题。
【解决方案2】：

更新

您需要根据需要更改翻译，请参阅演示

var width = 216;
var height = 200;
var barPadding = 18;
var barWidth = 58;
var dataSize = d3.selectAll(dataset).size();
var margin = { top: 10, right: 0, bottom: 58, left: 30 };
var width_box_sizing_border_box = width + margin.left + margin.right;
var height_box_sizing_border_box = height + margin.bottom + margin.top;
//var start = (width - margin.left - margin.right - (dataSize * barWidth) + barPadding) / 2;

var graph;
var xScale;
var yScale;
var dataset;

var xTicks = 6;
var yTicks = 6;

dataset = [{ desc: 'test1', val: 40 }, { desc: 'some dummy text here', val: 120 }];

xScale = d3.scaleBand()
    .domain(dataset.map(function (d) {
        return d.desc;
    }))
    .range([margin.left, width-margin.right]);

yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0, 350]);

graph = d3.select("#graph")
    .append("svg")
    .attr("class", "bar-chart")
    .attr("width", width_box_sizing_border_box)
    .attr("height", height_box_sizing_border_box)

graph.append("g")
    .attr("class", "x-scale")
    // changed translate here as per your need
    .attr("transform", "translate(0," + (height + margin.top) + ")") 
    .call(d3.axisBottom(xScale).ticks(xTicks))
    .selectAll(".tick text")
    .call(wrap, xScale.bandwidth());

graph.append("g")
    .attr("class", "y-scale")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.axisLeft(yScale).ticks(yTicks).tickPadding(10));

graph
    .append("g")
    .attr("transform", "translate(30," + margin.top + ")")
    .attr('class', 'graph-placeholder')
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar1")
    .attr("height", height)
    .attr("width", barWidth - barPadding)
    .attr('x', d => xScale(d.desc));

graph
    .append("g")
    .attr("transform", "translate(30," + margin.top + ")")
    .attr('class', 'graph-main')
    .selectAll("bar1")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "bar2")
    .attr('x', d => xScale(d.desc))
    .attr("y", function (d) {
        return yScale(d.val);
    })
    .attr("height", function (d) {
        return height - yScale(d.val);
    })
    .attr("width", barWidth - barPadding);


graph
    .append("g")
    .attr("transform", "translate(35," + margin.top + ")")
    .attr('class', 'bar-label')
    .selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(d => d.val + '%')
    .attr('x', d => xScale(d.desc))
    .attr("y", function (d) {
        return yScale(d.val) - 5;
    })

function wrap(text, width) {
    text.each(function () {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1,
            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);
            }
        }
    });
}
.bar-chart {
  background-color: #ccc;
}

.bar2 {
  fill: steelblue;
}

.bar1 {
  fill: #f2f2f2;
}

text {
  font-size: 12px;
  text-anchor: middle;
}

.bar-label text {
  text-anchor: start;
}
path.domain {
  stroke-width: 0;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
  <div id="graph"></div>
</div>

【讨论】：

  • 但我希望条形图在 y 轴之后的剩余空间中居中对齐。
  • 检查更新的答案，你只需要玩翻译
  • 但是您正在对翻译值进行硬编码。它应该是动态的。看看my 没有轴的条形图。更改数据集长度并检查。
  • 是的，你说得对，我给你的只是解决方法，它必须是动态的
  • 但如果我更改数据集，它似乎对我来说效果很好，请参阅jsfiddle.net/8zgs62Lv
猜你喜欢
  • 2013-02-26
  • 2017-11-24
  • 1970-01-01
  • 2021-09-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-06-25
  • 2021-08-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode