如何使图表条与图表轴对齐？

debugcn 发表于 Dev

谢尔盖·雅科维奇（Sergei Yakovich）

我的目标是使用示例数据在页面上显示条形图。我希望有一个x和y轴。

我遵循了有关如何创建D3.JS条形图的教程，该教程在添加x和y轴之前一直工作良好。我本来希望条形图适合轴的内部，但实际结果是条形图位于轴的外部。我在控制台中未收到任何错误消息。

我尝试重新定位代码，以便在轴前后都创建条形图，而没有任何乐趣。

var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500,
  svgHeight = 300,
  barPadding = 5;
var barWidth = (svgWidth / data.length);

var svg = d3.select('svg')
  .attr("width", svgWidth)
  .attr("height", svgHeight);

var barChart = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", function(d) {
    return svgHeight - d
  })
  .attr("height", function(d) {
    return d;
  })
  .attr("width", barWidth - barPadding)
  .attr("transform", function(d, i) {
    var translate = [barWidth * i, 0];
    return "translate(" + translate + ")";
  });

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, svgWidth]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([svgHeight, 0]);

var x_axis = d3.axisBottom().scale(xScale);

var y_axis = d3.axisLeft().scale(yScale);

svg.append("g")
  .attr("transform", "translate(50, 10)")
  .call(y_axis);

var xAxisTranslate = svgHeight - 20;

svg.append("g")
  .attr("transform", "translate(50, " + xAxisTranslate + ")")
  .call(x_axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class="bar-chart"></svg>

亚历克斯·L

我试图尽可能少地更改您的代码。

查看此示例以获取真正干净的方法：https : //bl.ocks.org/caravinden/d04238c4c9770020ff6867ee92c7dac1

var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500,
  svgHeight = 300,
  barPadding = 10;
  
const margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
};

var svg = d3.select('svg')
  .attr("width", svgWidth)
  .attr("height", svgHeight);
  
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;
var barWidth = (width / data.length);

var barChartGroup = svg.append('g')
  .attr("transform", `translate(${margin.left}, ${margin.top})`)

var xScale = d3.scaleBand()
  .domain(data.map((d,i) => i))
  .rangeRound([0, width])
  .padding(barPadding);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([height, 0]);
  
var x_axis = d3.axisBottom(xScale);
var y_axis = d3.axisLeft(yScale);

barChartGroup.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", function(d) {
    return yScale(d);
  })
  .attr("x", function(d,i) {
    return xScale(i) - (barWidth-barPadding)/2;
  })
  .attr("height", function(d) {
    return height - yScale(d);
  })
  .attr("width", barWidth - barPadding) //xScale.bandwidth()

svg.append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`)
  .call(y_axis);

svg.append("g")
  .attr("transform", `translate(${margin.left}, ${height + margin.top})`)
  .call(x_axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class="bar-chart"></svg>

输出：

对象数组示例：

var data = [
  {val: 80, name:"A"},
  {val: 100, name:"B"},
  {val: 56, name:"C"},
  {val: 120, name:"D"},
  {val: 180, name:"E"},
  {val: 30, name:"F"},
  {val: 40, name:"G"},
  {val: 120, name:"H"},
  {val: 160, name:"I"}
];

var svgWidth = 500,
  svgHeight = 300,
  barPadding = 10;
  
const margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
};

var svg = d3.select('svg')
  .attr("width", svgWidth)
  .attr("height", svgHeight);
  
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;
var barWidth = (width / data.length);

var barChartGroup = svg.append('g')
  .attr("transform", `translate(${margin.left}, ${margin.top})`)

var xScale = d3.scaleBand()
  .domain(data.map((d,i) => d.name))
  .rangeRound([0, width])
  .padding(barPadding);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.val)])
  .range([height, 0]);
  
var x_axis = d3.axisBottom(xScale);
var y_axis = d3.axisLeft(yScale);

barChartGroup.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("y", function(d) {
    return yScale(d.val);
  })
  .attr("x", function(d,i) {
    return xScale(d.name) - (barWidth - barPadding)/2; //barWidth - barPadding
  })
  .attr("height", function(d) {
    return height - yScale(d.val);
  })
  .attr("width", barWidth - barPadding); //xScale.bandwidth()

svg.append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`)
  .call(y_axis);

svg.append("g")
  .attr("transform", `translate(${margin.left}, ${height + margin.top})`)
  .call(x_axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class="bar-chart"></svg>

输出：

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

图表注释：如何沿数据点的轴对齐注释

来自分类Dev

图表条与d3.js中的x轴值不对齐

来自分类Dev

Highchart在图表底部绘制行与轴对齐

来自分类Dev

如何在matplotlib两个y轴图表中对齐条形和线形？

来自分类Dev

d3对立图表轴对齐问题

来自分类Dev

将图表标题与y轴上数字的左侧对齐

来自分类Dev

d3对立图表轴对齐问题

来自分类Dev

如何更改图表轴的字体属性

来自分类Dev

如何使用VBA显示图表轴标题

来自分类Dev

堆叠的水平条不在对齐图表JS中

来自分类Dev

如何在图表中对齐索引的系列

来自分类Dev

将X轴标签与图表列对齐（ASP.Net图表控件）

来自分类Dev

如何在Google图表折线图中沿X轴的一半终止一条线？

来自分类Dev

图表的轴值格式

来自分类Dev

获取图表轴值

来自分类Dev

BIRT图表轴问题

来自分类Dev

图表轴增量 vb

来自分类Dev

C＃图表中的轴相等（如何在C＃图表控件中使轴相等）

来自分类Dev

对齐多个图表区域

来自分类Dev

高图表/股票图表：x轴值

来自分类Dev

高图表/股票图表：x轴值

来自分类Dev

如何在高图表中同步多个图表的高度和y轴基线

来自分类Dev

Google图表-如何在图表的整个宽度上拉伸x轴

来自分类Dev

如何使用Shinobi iOS SDK将图表轴链接到图表系列？

来自分类Dev

如何使WinForms图表控件在图表的两侧绘制主要的Y轴？

来自分类Dev

如何将月份作为 x 轴添加到股票图表/高价图表

来自分类Dev

如何在图表的Y轴上保留更多空白？

来自分类Dev

如何在动态Highcharts图表的y轴上放置图标？

来自分类Dev

如何为Y轴iOS图表设置字体

Related 相关文章

文章