我没有使用d3的经验，我只是零星地使用Javascript和jQuery。
我正在尝试使用d3（和jQuery）中的滑块创建一个简单的散点图。滑块的目的是选择要绘制的数据集。我有一个JSON对象all_data，一个地图列表。对于列表中的每个地图，我分别使用"SI"和"F1"列表作为x和y值。
当移动滑块时，我将plotData()函数作为参数调用一个整数，表示all_data中数据集的索引（所以plotData(5)将绘制第6个数据集all_data）。
现在，由于某种原因，绘图轴构造得很好，但数据点没有绘制。我试图通过放置console.log(data)和来调试代码
function (d,i) { console.log(d); return x(d['SI'])代码中的相关部分（请参阅注释行）。 data对象包含函数中所有点的数据。问题似乎出现在g.selectAll("scatter-dots")部分之后。我怀疑最后调用函数绘制了点＆＃39;没有被召唤，但我无法弄明白为什么。
我的问题是：如何修复我的代码以便将数据点添加到绘图中？有关编码，设计或性能改进的任何其他提示都非常受欢迎 - 这里需要学习。
编辑：我使用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;
}
答案 0 :(得分：1)
从我看到的data[i]返回了一个对象。这当然不是问题，但d3方法enter（）仅支持数组。
这意味着在使用d['f1']添加数据时，您无法拥有enter()之类的内容。在使用它们之前将它们转换为数组可以修复此问题，您可以使用d（数组条目）或i数组条目索引。
答案 1 :(得分：0)
问题结果是var data = all_data[i]返回一个对象而不是一个数组的事实。我的一位同事提供了以下编辑以使其有效。 （还更改了一些其他代码以向脚本添加趋势线）。
<script type="text/javascript">
function plotData(i) {
// extracting data
var data = all_data[i];
var REGRESSION_Y = data.REGRESSION_Y;
var F1 = data.F1;
var SI = data.SI;
// removing previous plot
$("#plotfield").empty()
// margins and spacings (slightly larger, y-axis was invinsible)
var margin = {top: 50, right: 15, bottom: 80, left: 15}
, width = $("#container").width() - margin.left - margin.right
, height = $("#container").height() - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, d3.max(SI)])
.range([ 0, width ]);
var y = d3.scale.linear()
.domain([0, d3.max(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);
// append extra g part in svg and append to it
var g = main.append("svg:g")
// append the line
g.append('line')
.attr('x1', x(d3.min(SI)))//function(d, i) { return x(d[]) + i; })
.attr('x2', x(d3.max(SI)))//(2)//function(d, i) { return y(d['REGRESSION_Y']); });
.attr('y1', y(d3.min(REGRESSION_Y)))
.attr('y2', y(d3.max(REGRESSION_Y)))
.style('stroke', '#1B3277')
.style('stroke-width','1')
// append the dots
g.selectAll("scatter-dots")
.data(SI)
.enter().append("svg:circle")
.attr("cx", function (d,i) { return x(SI[i]); } )
.attr("cy", function (d,i) { return y(F1[i]); } )
.attr("r", 3);
}
</script>