Javascript 我的d3散点图没有';图表上没有显示
我试着在我的D3散点图上工作。我的数据似乎没有显示在图表上。有什么原因吗? 而且。。我已将我的x和y域设置为某个限制。但当我放大,缩小。。它仍然会超出限制 这是我的密码Javascript 我的d3散点图没有';图表上没有显示,javascript,d3.js,graph,data-driven,Javascript,D3.js,Graph,Data Driven,我试着在我的D3散点图上工作。我的数据似乎没有显示在图表上。有什么原因吗? 而且。。我已将我的x和y域设置为某个限制。但当我放大,缩小。。它仍然会超出限制 这是我的密码 var margin = { top: 20, right: 20,bottom: 20, left: 45 }, width = 900 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var parseDat
var margin = { top: 20, right: 20,bottom: 20, left: 45 },
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var zoom = d3.behavior.zoom()
.x(x)
.on("zoom", zoomed);
var svg = d3.select('.graph')
.append("svg")
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var clip = svg.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var chartBody = svg.append("g")
.attr("clip-path", "url(#clip)");
var make_x_axis = function () {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
};
var make_y_axis = function () {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
};
function zoomed() {
console.log(d3.event.translate);
console.log(d3.event.scale);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.select(".x.grid")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.select(".y.grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
svg.select(".dot")
.attr("class", "circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.ArtDateTime);})
.attr("cy", function(d) { return y(d.Ranking * 3); })
}
d3.csv("FinalCSVFile.csv", function(error, data) {
data.forEach(function(d) {
d.ArtDateTime = parseDate(d.ArtDateTime);
d.Ranking = +d.Ranking;
});
x.domain(d3.extent(data, function(d) { return d.ArtDateTime; }));
y.domain([0, 5]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
svg.append("g")
.attr("class", "y grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""));
chartBody.append("svg:path")
.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 5)
.attr("cx", function(d) { return x(d.ArtDateTime);})
.attr("cy", function(d) { return y(d.Ranking); });
});
请告诉我好吗?
需要帮助和建议!
我对D3.js非常陌生您不能将
圆圈
附加到路径
元素。如果删除.append(“svg:path”)
@larskothoff,您应该能够看到这些圆,我已经试过了。我的圆圈确实显示出来了。但是当我尝试放大/缩小时,我所有的圆圈都会直接移动到左边的Y轴栏。你看到了吗?@Larskothoff是的,我以前看过那个网页。由于我还是D3.js新手,我不太了解代码是如何工作的。。。