我到处搜索过，但似乎不太明白我在 d3 中绘制这些数据的问题。 cx 和 cy 坐标对我来说似乎是正确的，但所有点都渲染在远离屏幕的地方。
首先，我用数据加载数组(这是在 Angular 中完成的。我在数组 forEach 中跳过了几行，但这才是重要的部分):
dataArray.push({
'x_axis': new Date($scope.thisCompany.acquisition[key].date),
'y_axis': new Date($scope.thisCompany.acquisition[key].date).getMonth(),
'radius': '20',
'color': 'red'
});
数据数组最终会像这样出现:
[{x_axis: Date 2017-07-16T05:00:00.000Z ,y_axis: 6, radius: '20', color: 'red'}, {x_axis: Date 2017-07-29T05:00:00.000Z ,y_axis: 6, radius: '20', color: 'red'},{x_axis: Date 2003-09-03T05:00:00.000Z ,y_axis: 8, radius: '20', color: 'red'}]
最后是 d3 代码。(编辑)我忘记了早些时候添加它，因为我太累了，但是 y 轴应该绘制月份(一月、二月等)，x 轴应该绘制年份(2001 年) 2002 2003):
var foundedOn = new Date($scope.thisCompany.foundedOn);
const todaysDate = new Date();
const selectGraph = d3.select('#acquisition-history-chart').append('svg')
.attr('width' , '100%')
.attr('height' , '100%');
const xScale = d3.scaleTime()
.domain([foundedOn , todaysDate])
.range([0 , 700]);
const yScale = d3.scaleTime()
.domain([new Date(2012, 11, 31) , new Date(2012, 0, 1)])
.range([240 , 0]);
const xAxis = d3.axisBottom()
.scale(xScale);
const yAxis = d3.axisLeft()
.scale(yScale)
.tickFormat(d3.timeFormat("%b"));
const circles = selectGraph.selectAll('circle')
.data(dataArray)
.enter()
.append('circles');
const circleAttributes = circles
.attr('cx' , function(d) { return xScale(d.x_axis); })
.attr('cy' , function(d) { return d.y_axis; })
.attr('r' , function(d) { return d.radius; })
.style('fill' , function(d) { return d.color; });
selectGraph.append('g')
.attr('transform', 'translate(50, 260)')
.attr('class' , 'xAxis')
.call(xAxis);
selectGraph.append('g')
.attr('transform', 'translate(20, 35)')
.attr('class' , 'yAxis')
.call(yAxis);
这是一个 JS fiddle 。无法在此处显示图表。仍在努力:https://jsfiddle.net/d3zv8Lon/
最佳答案
如果 yScale 域在 2012 年初到 2012 年底之间，则 y_axis 中的月份也需要在 2012 年中。如果它们只是月份，则默认为 1900。
<!DOCTYPE html>
<body>
<style>
#company-acquisition-graph {
width: 100%;
height: 290px;
/*background: #1B1B1B;*/
background: gray;
border: 1px solid #383838;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px;
clear: both;
#acquisition-history-chart {
border-radius: 3px;
.xAxis,
.yAxis {
path,
line {
stroke: #1B1B1B;
}
text {
fill: white;
}
}
.yAxis text {
text-transform: uppercase;
font-weight: 300;
text-anchor: start;
}
.yAxis g:nth-child(odd) text {
font-size: 8px;
stroke: #B9B9B9
}
.yAxis g:nth-child(even) text {
font-size: 11px;
}
.xAxis g:nth-child(even) text {
stroke: #B9B9B9;
}
}
}
</style>
<div id="company-acquisition-graph">
<div style="width:100%; height: 290px;" id="acquisition-history-chart">
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var dataArray = [{
"x_axis": new Date('2017-07-16T05:00:00.000'),
"y_axis": new Date('2012-06-01'),
"radius": 20,
"color": "red"
}, {
"x_axis": new Date('2017-07-29T05:00:00.000'),
"y_axis": new Date('2012-06-01'),
"radius": 20,
"color": "red"
}, {
"x_axis": new Date('2003-09-03T05:00:00.000'),
"y_axis": new Date('2012-08-01'),
"radius": 20,
"color": "red"
}];
var foundedOn = new Date(1989, 00, 01);
const todaysDate = new Date();
const selectGraph = d3.select('#acquisition-history-chart').append('svg')
.attr('width', '100%')
.attr('height', '100%');
const xScale = d3.scaleTime()
.domain([foundedOn, todaysDate])
.range([0, 700]);
const yScale = d3.scaleTime()
.domain([new Date(2012, 11, 31), new Date(2012, 0, 1)])
.range([240, 0]);
const xAxis = d3.axisBottom()
.scale(xScale);
const yAxis = d3.axisLeft()
.scale(yScale)
.tickFormat(d3.timeFormat("%b"));
const circles = selectGraph.selectAll('circle')
.data(dataArray);
var newCircles1 = circles.enter();
newCircles1.append('circle')
.attr("class", "seeMe")
.attr('cx', function(d) {
return xScale(d.x_axis);
})
.attr('cy', function(d) {
return yScale(d.y_axis);
})
.attr('transform', 'translate(50, 0)')
.attr('r', function(d) {
return d.radius;
})
.style('fill', function(d) {
return d.color;
});
selectGraph.append('g')
.attr('transform', 'translate(50, 260)')
.attr('class', 'xAxis')
.call(xAxis);
selectGraph.append('g')
.attr('transform', 'translate(20, 35)')
.attr('class', 'yAxis')
.call(yAxis);
</script>此外，您的圆圈需要稍微向右平移，以便与 x 轴正确对齐。
关于javascript - 在 D3 v4 中在两个轴上绘制日期时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45997982/