我使用 d3 的经验为零，并且只是偶尔使用 Javascript 和 jQuery。
我正在尝试使用 d3 (和 jQuery)中的 slider 创建一个简单的散点图。 slider 的目的是选择要绘制的数据集。我有一个 JSON 对象 all_data ， map 列表。对于列表中的每个 map ，我使用 "SI"和"F1"分别列出为 x 和 y 值。
当 slider 移动时，我调用 plotData()函数，参数为整数，表示 all_data 中数据集的索引(因此 plotData(5) 将在 all_data 中绘制第 6 个数据集)。
现在，由于某种原因，绘图轴构造得很好，但数据点没有绘制。我尝试通过放置 console.log(data) 来调试代码和
function (d,i) { console.log(d); return x(d['SI'])在代码中的相关部分(请参阅注释行)。 data对象包含函数中所有点的数据。问题似乎出现在g.selectAll("scatter-dots")之后部分。我怀疑对绘制“点”的函数的最终调用没有被调用，但我不明白为什么。
我的问题是:如何修复我的代码，以便将数据点添加到图中？非常欢迎任何有关编码、设计或性能改进的其他技巧 - 在这里学习。
编辑:我使用 GitHub 中的自定义 d3.slider 扩展
var all_data = [{"REGRESSION_Y": [ list_of_floats ], "F1": [ list_of_floats ], "SI": [ list_of_floats ], "f+": some_float_val }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<link rel="stylesheet" href="d3/d3-slider-master/d3.slider.css" />
<link rel="stylesheet" href="plot.css" />
<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="d3/d3.v3.min.js"></script>
<script type="text/javascript" src="json_data.js"></script>
<script type="text/javascript" src="d3/d3-slider-master/d3.slider.js"></script>
</head>
<body>
<h2><span id="slider3text">Data points selected: 5</span></h2>
<div id='container' style='width: 75%; height: 100%' class='centered'>
<div id="plotfield" style='width: 100%; height: 90%'></div>
<div id="slider3" style='height: auto'></div>
</div>
</body>
<script type="text/javascript">
d3.select('#slider3').call(d3.slider().axis(true).min( 5 ).max( all_data.length-1 ).step(1).on("slide", function(evt, value) {
d3.select('#slider3text').text("Data points selected: " + value);
plotData(value)
}));
</script>
<script type="text/javascript">
function plotData(i) {
var data = all_data[i]
$("#plotfield").empty()
var margin = {top: 50, right: 5, bottom: 80, left: 5}
, width = $("#container").width() - margin.left - margin.right
, height = $("#container").height() - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d['SI']; })])
.range([ 0, width ]);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d['F1']; })])
.range([ height, 0 ]);
var chart = d3.select('#plotfield')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
var g = main.append("svg:g");
//console.log(data), this worked here
g.selectAll("scatter-dots")
.data(data)
.enter().append("svg:circle")
// I have tried function (d,i) { console.log(d); return x(d['SI'])
//in the below anonymous functions, but that doesn't yield an output,
//causing me to suspect that the functions are not executed.
.attr("cx", function (d,i) { return x(d['SI']); } )
.attr("cy", function (d) { return y(d['F1']); } )
.attr("r", 3);
}
和 CSS 文件:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
body {
font: 11px sans-serif;
}
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
circle {
fill: steelblue;
}
最佳答案
据我所知，data[i] 返回了一个对象。这当然不是问题，但是d3方法enter()只支持数组。
这意味着在使用 enter() 添加数据时不能使用诸如 d['f1'] 之类的东西。在使用它们之前将它们转换为数组可以解决此问题，您可以使用 d (数组条目)或 i 数组条目索引。
关于javascript - d3 中的散点图点未渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40506790/