Question

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

使用d3.js / dc.js，我有两个折线图。当用户点击一个图表中的点点时，我需要在其伴随图表上标识相同的点。两个图表都使用类似的X轴，即日期系列。日期将完全对应，因此图表1上的第n个数据点将对应于chart2上的第n个数据点 - 所以当用户点击图表1时，我有来自他们刚刚点击的数据点的数据，我想要抓住＆＃34; y＆＃34;来自图表2上相同数据点的数据（可通过在x轴上具有相同的＆＃34; x＆＃34;数据点来识别）。

我试图遍历多维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');
        }
    }
}

结果：

[circle.dot, circle.dot, circle.dot, (etc, all the 600+ data elements)]

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

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

因此，在上面的for循环中，如何访问每个circle.dot对象中的x（日期）值和y（数字）值？

代码示例：

＆＃13;

var startDate = new Date("2011-11-14T16:17:54Z");
var currDate = moment(startDate);
var cf = crossfilter([{date: startDate, quantity: 1}]);
AddData();

var timeDimension = cf.dimension(function(d){ return d.date; });
var totalGroup = timeDimension.group().reduceSum(function(d){ return d.quantity; });

var lineChart1 = dc.lineChart("#line-chart1")
    .brushOn(false)
    .width(800)
    .height(200)
    .elasticY(true)
    .x(d3.time.scale().domain([startDate, currDate]))
    .dimension(timeDimension)
    .group(totalGroup);
var lineChart2 = dc.lineChart("#line-chart2")
    .brushOn(false)
    .width(800)
    .height(200)
    .elasticY(true)
    .x(d3.time.scale().domain([startDate, currDate]))
    .dimension(timeDimension)
    .group(totalGroup);
var lineChart3 = dc.lineChart("#line-chart3")
    .brushOn(false)
    .width(800)
    .height(200)
    .elasticY(true)
    .x(d3.time.scale().domain([startDate, currDate]))
    .dimension(timeDimension)
    .group(totalGroup);

dc.renderAll();

lineChart1.on('renderlet', function(lineChart1) {
    lineChart1.selectAll('circle.dot').on('click', function(d) {
         alert('Chart One: X-axis (Date): ' +d.x+"\n\n"+ "Y-axis (Value): "+d.y);
         //How would I add the corresponding y-axis datapoint values for charts 2 and 3?
    });
});

d3.selectAll("circle.dot").on("mouseover", function(){
var thisDatum = d3.select(this).datum();
  d3.selectAll("circle.dot").filter(d=>d.x == thisDatum.x && d.y == thisDatum.y).attr("fill", "firebrick");
}).on("mouseout", function(){
	d3.selectAll("circle.dot").attr("fill", "teal")
})

for (var nn=1;nn<6;nn++){
	setTimeout(function(){
    AddData();
    lineChart1.x(d3.time.scale().domain([startDate, currDate]));
    lineChart2.x(d3.time.scale().domain([startDate, currDate]));
    lineChart3.x(d3.time.scale().domain([startDate, currDate]));
    dc.renderAll();
  },1000);
}

function AddData(){
    var q = Math.floor(Math.random() * 6) + 1;
    currDate = currDate.add('month', 1);
    cf.add( [{date: currDate.clone().toDate(), quantity: q}]);  
}

＆＃13;

#line-chart3{margin-bottom:10px;}
.msg{font-family:Arial,Helvetica;font-size:1.2rem;color:brown;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link href="http://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>

<div class="msg">Click a data point in chart 1:</div>
<div id="line-chart1"></div>
<div id="line-chart2"></div>
<div id="line-chart3"></div>
<div class="msg">Click on a data point in chart 1 -- an alert messagebox should pop-up with the corresp. datapoint values from all 3 line charts.</div>

＆＃13;

Answer 1

你不需要任何循环。

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

d3.select(this).datum()

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

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

这是一个演示，向您展示如何做到这一点。在本演示中，我将绘制两个具有相同数据的SVG。当您将鼠标悬停在一个圆圈上时，它会在另一个具有相同x和y属性的SVG上绘制圆圈：

＆＃13;

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}];

draw("#svg1");
draw("#svg2");

function draw(selector){

var width = 250,
    height = 250;

var svg = d3.select(selector)
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var xScale = d3.scaleLinear()
    .domain([0, 100])
    .range([30, width - 10]);

var yScale = d3.scaleLinear()
    .domain([0,100])
    .range([height - 30, 10]);
	
var circles = svg.selectAll("foo")
	.data(data)
	.enter()
	.append("circle");
	
circles.attr("r", 10)
	.attr("fill", "teal")
	.attr("cx", d=>xScale(d.x))
	.attr("cy", d=>yScale(d.y));

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", "translate(0,220)")
    .attr("class", "xAxis")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(30,0)")
    .attr("class", "yAxis")
    .call(yAxis);

}

d3.selectAll("circle").on("mouseover", function(){
var thisDatum = d3.select(this).datum();
  d3.selectAll("circle").filter(d=>d.x == thisDatum.x && d.y == thisDatum.y).attr("fill", "firebrick");
}).on("mouseout", function(){
	d3.selectAll("circle").attr("fill", "teal")
})

＆＃13;

#svg1 {
  float: left;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="svg1"></div>
<div id="svg2"></div>

＆＃13;

Answer 2

要访问嵌套属性，例如'x'对象的'__data__'属性的allDots[key]属性，您只需链接属性取消引用：

allDots[key].__data__.x

OR

allDots[key]['__data__']['x']

（或其任何混合物）

访问多维javascript对象

2 个答案: