Javascript 如何访问数组中的数据

如何访问d3.js中多维数组中的数据

我用一维数组创建了这个小火花。 但是，当我想使用多维数组创建更多的火花线时，该怎么办呢

我有这个效果

    var canvasWidth  = 200,
    canvasHeight = 150;

var pathData = [
  { "x": 0,   "y": 50}, 
  { "x": 20,  "y": 20},
  { "x": 60,  "y": 40}, 
  { "x": 80,  "y": 30}, 
  { "x": 120, "y": 90},
  { "x": 150, "y": 70}, 
  { "x": 180, "y": 30},
  { "x": 190, "y": 90},
];

var widthScale = d3.scaleLinear()
  .domain([0, 190])
  .range([0, canvasWidth - 30]);

var heightScale = d3.scaleLinear()
  .domain([0, 90])
  .range([0, canvasHeight - 10]);

// Canvas
var canvas = d3.select("body")
  .append("svg")
  .attr("width", canvasWidth)
  .attr("height", canvasHeight)
    .append("g")
    .attr("transform","translate(20)");

// _+_+_+_+_+_+_+_+ Basic of Data --> SVG Path _+_+_+_+_+_+_+_+ //

// Create accessor function
var pathFunction = d3.line()
  .x(function(d) { return widthScale(d.x); })
  .y(function(d) { return heightScale(d.y); })
  .curve(d3.curveCatmullRom);

// Create <path> and append accessor function
var path = canvas.append("path")
  .attr("d", pathFunction(pathData))
  .attr("stroke", "red")
  .attr("stroke-width", 2)
  .attr("fill", "none");

// Add data points 
var circles = canvas.selectAll("circle")
  .data(pathData)
  .enter()
  .append("circle")
    .attr("cx", function(d) { return widthScale(d.x) })
    .attr("cy", function(d) { return heightScale(d.y) })
    .attr("fill", "black")
    .attr("r", 4);

`

---

CX和CY位置为NaN。还有，只有3个圆，而不是8个圆作为数组长度（）

我发现检查类似问题的一种有用方法是将“d”值记录到控制台：

.attr("cx", function(d,i) { console.log(d); return widthScale(d.x) })

这可能会突出显示，因为您现在使用的是多维数组，绑定到圆元素的数据不再为您提供对数据点的即时访问。以下类似的方法可能会起作用：

.attr("cx", function(d,i) { return widthScale(d[i].x) })

---

您只需进行一次修改：

由于有3个内部数组，每个SVG都有一个这样的数组作为数据绑定。所以，当涉及到附加圆，而不是

var circles = canvas.selectAll("circle")
    .data(pathData)
    .enter()        
    .append("circle")

，它指向整个数据数组，它应该是

var circles = canvas.selectAll("circle")
    .data(d => d)
    .enter()        
    .append("circle")

。。。这使得内部数组（即绑定到每个SVG的数据）成为每组圆的数据数组

这是您的工作代码，仅进行了修改（此外，您在

高度刻度上有一个打字错误

）：

var canvasWidth=200，
画布高度=150；
变量路径数据=[
[
{x:0，y:50}，{x:20，y:20}，
{“x:60，y:40}，{“x:80，y:30}，
{“x”：120，“y”：90}，{“x”：150，“y”：70}，
{“x”：180，“y”：30}，{“x”：190，“y”：90}，
],
[    
{x:0，y:90}，{x:20，y:20}，
{x:30，y:80}，{x:80，y:30}，
{“x”：120，“y”：90}，{“x”：150，“y”：70}，
{“x”：180，“y”：30}，{“x”：190，“y”：90}，
],
[    
{x:0，y:40}，{x:20，y:20}，
{x:30，y:80}，{x:80，y:30}，
{“x”：120，“y”：90}，{“x”：150，“y”：70}，
{“x”：180，“y”：30}，{“x”：190，“y”：90}，
]
];
var widthScale=d3.scaleLinear（）
.domain（[0190]）
.范围（[0，画布宽度-30]）；
var heightScale=d3.scaleLinear（）
.domain（[0，90]）
.范围（[0，画布高度-10]）；
//帆布
变量容器=d3。选择（“主体”）
//创建访问器函数
var pathFunction=d3.line（）
.x（函数（d）{返回宽度刻度（d.x）；}）
.y（函数（d）{返回高度刻度（d.y）；}）
.曲线（d3.curveCatmullRom）；
var canvas=container.selectAll（“svg”）
.data（路径数据）
.输入（）
.append（“svg”）
.attr（“宽度”，画布宽度）
.attr（“高度”，画布高度）
.附加（“g”）
.attr（“转换”、“翻译（20）”）；
var sparklines=canvas.append（“路径”）
.attr（“d”，路径函数）
.attr（“笔划”，“19ff9f”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
var circles=canvas.selectAll（“圆”）
.数据（d=>d）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d，i）{返回宽度标度（d.x）；}）
.attr（“cy”，函数（d，i）{返回高度刻度（d.y）；}）
.attr（“填充”、“黑色”）
.attr（“r”，3）
非常感谢！效果不错。我很想知道这段代码是如何工作的-.data（d=>d）？如果我有更多的数组，例如这3个数组中的每一个都有2个数组呢？这只是一个粗箭头，表示每组圆的数据都是每个内部数组。如果您有更深的数组，只需继续附加组，或者在您的情况下附加SVG。
var circles = canvas.selectAll("circle")
    .data(d => d)
    .enter()        
    .append("circle")