D3.js更新onclick其他元素

Question

我遇到d3.js的问题我正在尝试制作一个网格，其中每一行都有＆＃34;两个状态＆＃34; （两种颜色），你可以看到。我生成元素，它工作得很好（也许我可以做得更容易）。我的问题是我需要进行转换＆＃34;。如果你点击一个矩形，矩形的每一面都会改变颜色。 具体来说，我的问题是如何才能实现这一功能？

提前谢谢。

这是我陷入困境的地方：

＆＃13;

＆＃13;

// grid basic variables
var dimension = 10,
	width = 50,
	height = 50;

function gridData() {
	var data = new Array();

	// rectangle variables
	var rectXpos = 0,
	 	rectYpos = 0,
	 	rectWidth = width,
	 	rectHeight = height;
		click = 0;

	// iterate for rows
	for (var row = 0; row < dimension; row++) {

		// iterate for cells/columns inside rows
		for (var column = 0; column < dimension; column++) {
			// rectClass = "rect" + rectXpos.toString() + rectYpos.toString();
			data.push({
				x: rectXpos,
				y: rectYpos,
				width: rectWidth,
				height: rectHeight,
				// class: rectClass,
				click: click
			});

			// increment the x position. I.e. move it over by 50 (width variable)
			rectXpos += rectWidth;
		}
		// reset the x position after a row is complete
		rectXpos = 0;
		// increment the y position for the next row. Move it down 50 (height variable)
		rectYpos += rectHeight;
	}
	return data;
}

var gridData = gridData();
// I like to log the data to the console for quick debugging
console.log(gridData);

var grid = d3.select("#grid")
	.append("svg")
	.attr("width", width*dimension)
	.attr("height",height*dimension);

var rect = grid.selectAll(".square")
	.data(gridData)
	.enter().append("rect")
	.attr("class","rect")
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.attr("width", function(d) { return d.width; })
	.attr("height", function(d) { return d.height; })
	.style("fill", "#f2f2f2")
	.style("stroke", "#fff")
	.on('click', function(d) {
		d.click ++;
		d3.select(".vline" + d.x.toString() + d.y.toString() + (d.x + 50).toString() + d.y.toString()).style("stroke","#f4363f");
		// d3.select(".vline" + d.x.toString() + (d.y + 50).toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke","#f4363f");
		// d3.select(".hline" + d.x.toString() + d.y.toString() + d.x.toString() + (d.y + 50).toString()).style("stroke","#f4363f");
		// d3.select(".hline" + (d.x + 50).toString() + d.y.toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke","#f4363f");
	});

function hlinegriddata() {
	var data = new Array();

	// line variables
	var hlineX1 = 0,
	 	hlineY1 = 0,
	 	hlineX2 = 0,
	 	hlineY2 = 50,
		click = 0;

	var lineLength = width;

	for (var row = 0; row < dimension; row++) {

		// iterate for cells/columns inside rows
		for (var column = 0; column < dimension + 1; column++) {
			hlineClass = "hline" + hlineX1.toString() + hlineY1.toString() + hlineX2.toString() + hlineY2.toString();
			data.push({
				x1: hlineX1,
				y1: hlineY1,
				x2: hlineX2,
				y2: hlineY2,
				class: hlineClass,
				click: click
			});

	  	    // increment the x position for the next line
	  	    hlineX1 += lineLength;
	  	    hlineX2 += lineLength;
		}

		// reset the x position after a row is complete
		hlineX1 = 0;
		hlineX2 = 0;

		// increment the y position for the next row. Move it down 50 (height variable)
		hlineY1 += lineLength;
		hlineY2 += lineLength;
	}
	return data;
}

var hlinegriddata = hlinegriddata();
// I like to log the data to the console for quick debugging
console.log(hlinegriddata);

var hline = grid.selectAll(".hline")
	.data(hlinegriddata)
	.enter().append("line")
	.attr("class", function(d) { return d.class; })
	.attr("x1", function(d) { return d.x1; })
	.attr("y1", function(d) { return d.y1; })
	.attr("x2", function(d) { return d.x2; })
	.attr("y2", function(d) { return d.y2; })
	.style("stroke", "#fff")
	.style("stroke-width", "4")
	.style("cursor", "pointer")
	.on('click', function(d) {
		d.click ++;
       if ((d.click)%2 == 0 ) { d3.select(this).style("stroke","#fff"); }
	   if ((d.click)%2 == 1 ) { d3.select(this).style("stroke","#f4363f"); }
    });

function vlinegriddata() {
	var data = new Array();

	// line variables
	var vlineX1 = 0,
	 	vlineY1 = 0,
	 	vlineX2 = 50,
	 	vlineY2 = 0,
		click = 0;

	var lineLength = width;

	// iterate for rows
	for (var row = 0; row < dimension; row++) {

		// iterate for cells/columns inside rows
		for (var column = 0; column < dimension + 1; column++) {
			vlineClass = "vline" + vlineX1.toString() + vlineY1.toString() + vlineX2.toString() + vlineY2.toString();
			data.push({
				x1: vlineX1,
				y1: vlineY1,
				x2: vlineX2,
				y2: vlineY2,
				class: vlineClass,
				click: click
			});

	  	    // increment the x position for the next line
	  	    vlineY1 += lineLength;
	  	    vlineY2 += lineLength;
		}

		// reset the x position after a row is complete
		vlineY1 = 0;
		vlineY2 = 0;
		// increment the y position for the next row. Move it down 50 (height variable)
		vlineX1 += lineLength;
		vlineX2 += lineLength;
	}
	return data;
}

var vlinegriddata = vlinegriddata();
// I like to log the data to the console for quick debugging
console.log(vlinegriddata);

var vline = grid.selectAll(".vline")
	.data(vlinegriddata)
	.enter().append("line")
	.attr("class", function(d) { return d.class; })
	.attr("x1", function(d) { return d.x1; })
	.attr("y1", function(d) { return d.y1; })
	.attr("x2", function(d) { return d.x2; })
	.attr("y2", function(d) { return d.y2; })
	.style("stroke", "white")
	.style("stroke-width", "4")
	.style("cursor", "pointer")
	// .on("click", function(){var nextColor = this.style.stroke == "white" ? "magenta" : "white";
    //         d3.select(this).style("stroke", nextColor);});
	.on('click', function(d) {
       d.click ++;
       if ((d.click)%2 == 0 ) { d3.select(this).style("stroke","#fff"); }
	   if ((d.click)%2 == 1 ) { d3.select(this).style("stroke","#f4363f"); }
    });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="grid"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不确定我理解所有这些线的目的。你可以抚摸rect：

.on('click', function(d) {
  s.click ++;
  d3.select(this)
    .style("stroke", "#f4363f")
    .style("stroke-width", "1px");
});

运行代码：

// grid basic variables
var dimension = 10,
	width = 50,
	height = 50;

function gridData() {
	var data = new Array();

	// rectangle variables
	var rectXpos = 0,
	 	rectYpos = 0,
	 	rectWidth = width,
	 	rectHeight = height;
		click = 0;

	// iterate for rows
	for (var row = 0; row < dimension; row++) {

		// iterate for cells/columns inside rows
		for (var column = 0; column < dimension; column++) {
			// rectClass = "rect" + rectXpos.toString() + rectYpos.toString();
			data.push({
				x: rectXpos,
				y: rectYpos,
				width: rectWidth,
				height: rectHeight,
				// class: rectClass,
				click: click
			});

			// increment the x position. I.e. move it over by 50 (width variable)
			rectXpos += rectWidth + 1;
		}
		// reset the x position after a row is complete
		rectXpos = 0;
		// increment the y position for the next row. Move it down 50 (height variable)
		rectYpos += rectHeight + 1;
	}
	return data;
}

var gridData = gridData();
// I like to log the data to the console for quick debugging
console.log(gridData);

var grid = d3.select("#grid")
	.append("svg")
	.attr("width", width*dimension)
	.attr("height",height*dimension);

var rect = grid.selectAll(".square")
	.data(gridData)
	.enter().append("rect")
	.attr("class","rect")
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.attr("width", function(d) { return d.width; })
	.attr("height", function(d) { return d.height; })
	.style("fill", "#f2f2f2")
	.style("stroke", "#fff")
	.on('click', function(d) {
		d.click ++;
    d3.select(this)
      .style("stroke", "#f4363f")
      .style("stroke-width", "1px");
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="grid"></div>