访问多维JavaScript对象中的子键

这实际上是一个JavaScript问题，因为它涉及到迭代多维js对象的元素，并解释如何使用Firefox控制台对该对象的表示

使用d3.js/dc.js，我有两个折线图。当用户单击一个图表中的一个点时，我需要在其对应的图表上标识相同的点。两个图表都使用类似的X轴，即日期序列。日期将完全对应，因此图表1上的第n个数据点将对应于图表2上的第n个数据点-因此，当用户单击图表1时，我有他们刚刚单击的数据点的数据，我想从图表2上的相同数据点获取“y”数据（通过在x轴上具有相同的“x”数据点来识别）

我试图遍历多维JavaScript对象（表示d3.js折线图#2上的数据点），但不确定如何访问所需的值

此循环：

lineChart.on('renderlet', function(lineChart) {
    var allDots = lineChart.selectAll('circle.dot');
    allDots.on('click', function(d) {
        var dot2find = d.x;
        for (var key in allDots) { //<=== THIS LOOP
            //at the moment, I am just cycling through chart 1 to find its own date
            if (allDots.hasOwnProperty(key)) {
                console.log(allDots[key]);
                //if (this_x_val == dot2find) alert('Found It');
        }
    }
}

当我查看其中一个圆形对象时，我看到了（在Firefox控制台中）：

当我在Firefox控制台中打开第一个\uuuuuu data\uuuu对象时，我看到了需要访问的元素：x（日期）值：

因此，在上面的for循环中，如何访问每个circle.dot对象中的

x

（日期）值和

y

（数字）值

代码示例：

var startDate=新日期（“2011-11-14T16:17:54Z”）；
var currDate=力矩（起始日期）；
var cf=crossfilter（[{date:startDate，quantity:1}]）；
AddData（）；
var timeDimension=cf.dimension（函数（d）{返回d.date；}）；
var totalGroup=timeDimension.group（）.reduceSum（函数（d）{返回d.quantity；}）；
var lineChart1=直流线图（“线图1”）
.brushOn（错）
.宽度（800）
.身高（200）
.弹性（真实）
.x（d3.time.scale（）.domain（[startDate，currDate]））
.dimension（时间维度）
.组（总体组）；
var lineChart2=直流线图（#line-chart2”）
.brushOn（错）
.宽度（800）
.身高（200）
.弹性（真实）
.x（d3.time.scale（）.domain（[startDate，currDate]））
.dimension（时间维度）
.组（总体组）；
var lineChart3=直流线图（#line-chart3”）
.brushOn（错）
.宽度（800）
.身高（200）
.弹性（真实）
.x（d3.time.scale（）.domain（[startDate，currDate]））
.dimension（时间维度）
.组（总体组）；
dc.renderAll（）；
lineChart1.on（'renderlet'，函数（lineChart1）{
线形图1.选择全部（'circle.dot'）。打开（'click'，函数（d）{
警报（'图表一：X轴（日期）：'+d.X+“\n\n”+“Y轴（值）：“+d.Y”）；
//如何为图表2和3添加相应的y轴数据点值？
});
});
d3.在（“鼠标悬停”，函数（）上选择All（“circle.dot”）{
var thisdatam=d3.选择（this）.datum（）；
d3.选择All（“circle.dot”）.filter（d=>d.x==thisdatam.x&&d.y==thisdatam.y）.attr（“fill”，“firebrick”）；
}).on（“mouseout”，函数（）{
d3.选择全部（“圆形点”）.attr（“填充”、“teal”）
})
对于（var nn=1；nn要访问嵌套属性，例如
allDots[key]
对象的
''data'
属性的
'x'
属性，只需链接属性解除引用：

allDots[key].__data__.x

或

（或其任何混合物）
您不需要任何类型的循环

要获取与单击的元素关联的属性，只需使用：

d3.select(this).datum()

在您的情况下，如果需要
x
属性：

d3.select(this).datum().x

下面是一个演示，向您演示如何操作。在这个演示中，我使用相同的数据绘制了两个SVG。当您将鼠标悬停在一个圆圈上时，它会在另一个SVG上绘制圆圈，该SVG具有相同的
x
和
y
属性：


var data=[{x:20，y:30}，
{x:40，y:60}，
{x:20，y:40}，
{x:10，y:90}，
{x:70，y:20}，
{x:60，y:90}，
{x:30，y:90}，
{x:90，y:10}]；
绘制（“svg1”）；
绘制（“svg2”）；
函数绘制（选择器）{
可变宽度=250，
高度=250；
var svg=d3.选择（选择器）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var xScale=d3.scaleLinear（）
.domain（[01100]）
.范围（[30，宽度-10]）；
var yScale=d3.scaleLinear（）
.domain（[0100]）
.范围（[高度-30,10]）；
var circles=svg.selectAll（“foo”）
.数据（数据）
.输入（）
.附加（“圆圈”）；
圆圈。属性（“r”，10）
.attr（“填充”、“teal”）
.attr（“cx”，d=>xScale（d.x））
.attr（“cy”，d=>yScale（d.y））；
var xAxis=d3.axisBottom（xScale）；
var yAxis=d3.轴左（yScale）；
svg.append（“g”）.attr（“transform”、“translate（0220）”）
.attr（“类”、“xAxis”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“转换”、“翻译（30,0）”）
.attr（“类”、“亚克斯”）
.呼叫（yAxis）；
}
d3.选择所有（“圆圈”）。在（“鼠标悬停”，函数（）上）{
var thisdatam=d3.选择（this）.datum（）；
d3.选择全部（“圆圈”）.filter（d=>d.x==thisdatam.x&&d.y==thisdatam.y）.attr（“填充”、“耐火砖”）；
}).on（“mouseout”，函数（）{
d3.选择全部（“圆圈”）.attr（“填充”、“teal”）
})
#svg1{
浮动：左；
}

谢谢Ethan，我更新了问题，使之更清楚。Firefox控制台有一种显示对象属性的特定方式，而且_data_对象来自Firefox控制台，而不是图表的数据集。奇怪，我知道，但你帮助我认识到，我必须清楚，这个对象是Firefox控制台特有的。谢谢！顺便说一句，还有FWIW，我通常更喜欢Chrome及其开发工具，但在这种情况下，Firefox控制台更有用。提供Chrome控制台无法提供的信息。
\uuuu data\uuuu
是d3内部用于将数据绑定到元素的工具。它不是由浏览器生成的。嗨，Gerardo，写得很好的Answer，但它没有完全解决这个问题我要问的问题（无可否认使用了太多的单词）。在您的示例中，您正在对所有图表中具有特定X值的所有数据点应用一种样式。我如何修改此样式，以便从其他两个图表中的每个对应数据点收集“y”数据，同时识别每个图表中的哪个图表是d
d3.select(this).datum()

d3.select(this).datum().x