我想使用d3.js制作折线图,其中我想将圆圈放在数据的位置。但是圆圈放在折线图中的错误位置。我该如何解决这个问题?
我在Angular工作。基本数据集看起来像
{
type: 'Advanced',
wcpm: 40,
date: '11-25-2019',
comment: [
'Lorem Ipsum Lorem Ipsum Lorem 1',
'Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 2'
]
}
输出图像链接:https://ibb.co/pwRdXjx
其中第一个圆圈应放置在1月25日,但它放在错误的位置。
class AppComponent implements OnInit {
title = 'chart';
margin = { top: 50, right: 50, bottom: 50, left: 50 };
width = 1200 - this.margin.left - this.margin.right;
height = 700 - this.margin.top - this.margin.bottom;
svg: any;
xScale: any;
yScale: any;
line: any;
toolTipDiv: any;
ngOnInit() {
// XAXIS
this.xScale = d3.scaleBand()
.domain(this.dataset[0].fluencyData.map((data) => {
return new Date(data.date);
}))
.range([0, this.width]);
// YAXIS
this.yScale = d3.scaleLinear()
.domain([0, 110])
.range([this.height, 0]);
// Line Generator
this.line = d3.line()
.x((d) => this.xScale(new Date(d.date)))
.y((d) => this.yScale(d.wcpm));
// .curve(d3.curveMonotoneX);
// Add SVG to Div
this.svg = d3.select('#displayChart').append('svg')
.attr('width', this.width + this.margin.left + this.margin.right)
.attr('height', this.height + this.margin.top + this.margin.bottom)
.append('g')
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
// Define the div for the tooltip
this.toolTipDiv = d3.select('#displayChart').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
// Append XAXIS to the SVG
this.svg.append('g')
.attr('class', 'xAxis')
.attr('transform', 'translate(0,' + this.height + ')')
.call(d3.axisBottom(this.xScale).tickSizeOuter(0).tickFormat(d3.timeFormat('%b %d')));
// Append YAXIS to SVG
this.svg.append('g')
.attr('class', 'yAxis')
.call(d3.axisLeft(this.yScale).tickSize(-this.width)
);
// Make a Path for Dataset
this.svg.append('path')
.datum(this.dataset[0].fluencyData)
.attr('class', 'line')
.attr('d', this.line);
// Text Heading of DATE in chart
this.svg.append('text')
.attr('transform', 'translate(' + (-20) + ',' + (this.height + 13) + ')')
.attr('dy', '.35em')
.attr('class', ' xAxis')
.text('Date');
// Append Circles in chart with different Colors
this.appendCircles();
}
appendCircles() {
this.svg.selectAll('.developing')
.data(this.dataset[0].fluencyData)
.enter().append('circle')
.attr('class', (d) => d.type)
.attr('cx', (d) => this.xScale(new Date(d.date)))
.attr('cy', (d) => this.yScale(d.wcpm))
.attr('r', 5)
.on('mouseover', (d) => {
this.toolTipDiv.transition()
.duration(200)
.style('opacity', .9);
this.toolTipDiv.html(d.wcpm + '<br/>' + d.type + '<br/>' + d.date)
.style('left', (d3.event.pageX - 50) + 'px')
.style('top', (d3.event.pageY - 50) + 'px');
})
.on('mouseout', () => {
this.toolTipDiv.transition()
.duration(500)
.style('opacity', 0);
});
}
}
带尺度预期每个数据项用具有宽度的东西表示,例如条形图中的条。该元素的缩放空间(带)的宽度是从xBandScale(value)
到xBandScale(value) + xBandScale.bandwidth()
。这很方便,因为它允许您将矩形的x值设置为xBandScale(value)
,将宽度设置为xBandScale.bandwidth()
。
但是如果你定位圆圈,你希望它们位于这个空间中间的中心位置。你用xScale(value)
定位你的分数,是乐队的左手边:
.attr("cx", function(d) { return xScale(d.someProperty) + xScale.bandwidth()/2 })
轴刻度是偏移的,因为它们预测了带的宽度,毕竟我们正在将带刻度传递给轴生成器。
是的,你可以用你的圈子定位:
d3.scalePoint
这会将圆圈放在乐队的中间 - 这会使您的圆圈与您的轴刻度对齐。但是,你的线不会从垂直轴开始,这并不是乐队音阶的预期目的,即使它有效。
相反,我们可以尝试 - 这也是一个序数尺度,类似于乐队规模。文档声明:“点标度通常用于具有序数或分类维度的散点图。”如果您的物体没有宽度(或更准确地说,位于带的中间),它们是理想的选择。
通过这个,我们得到一个看起来像的图形(使用与上面相同的数据和结构):
xScale.step()
请注意,点之间的间距是this.xScale = d3.scaleBand()
.domain(this.dataset[0].fluencyData.map((data) => {
return new Date(data.date);
}))
.range([this.margin.left, this.width]);
,轴刻度已移动(同样,最后一步超过轴线 - 它仅用于说明,轴终止于d)。
最后,如果我们有一个表示时间或其他一些连续数量的轴,我们可以使用d3中的任何连续标度而不是顺序标度,这通常是更可取的。
为简单起见,我假设没有填充来保持图像更容易阅读
您的SVG中剩余边距为50,但xScale范围从0开始。这就是为什么所有内容都向左移动的原因。您的xScale范围应从您的边距开始,并以svg宽度结束。
qazxswpoi