我正在尝试创建散点图，当我的轴被渲染时，我看不到任何圆圈。我不明白出了什么问题。
我意识到我的数据值是字符串，所以我使用了“+”运算符。还是不行。 没有错误消息。我可以看到调试窗口中的元素正在创建，但它们没有显示。
这是我的代码:
function visualize(data) {
var margin = { top: 20, bottom: 80, right:50, left: 70 };
var width = 720 - margin.left + margin.right, height = 500 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.right + margin.left);
g=svg.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");
var xScale = d3.scaleLinear().domain(d3.extent(data,function(d) {
return +d.FTAG;
})).range([0, width]);
var yScale = d3.scaleLinear().domain([0,d3.max(data,function(d) { return +d["AF"]; })]).range([height, 0]);
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
g.append("g").attr("class", "x-axis").attr("transform", "translate(0," + height + ")").call(xAxis);
g.append("g").attr("class", "y-axis").attr("transform", "translate(0,0)").call(yAxis);
d3.selectAll("dot").data(data)
.enter()
.append("g")
.append("circle")
.attr("r", 20)
.attr("cx",
function(d) {
return xScale(+d.FTAG);
})
.attr("cy",
function(d) {
return yScale(+d.AF);
})
.style("fill",
function(d) {
if (+d.AF >= 20) {
return "red";
} else
return "steelblue";
})
.style("stroke","black")
.style("stroke-width",1.5);
}
最佳答案
在您的代码中...
d3.selectAll("dot")
.data(data)
.enter()
.append("g")
...不会在任何地方附加组。
它必须是:
svg.selectAll("dot")
.data(data)
.enter()
.append("g")
自 svg是将 SVG 附加到 <body> 的选择.
关于javascript - 在 d3.js 中看不到圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43993688/