line add selected.each（）

Question

你能帮助我为什么这不能正常工作吗？

这是一个物理演示，其概念是如果我点击它就可以改变线条的颜色，当我点击一个矩形时，我想要改变所有的边（围绕它的线条）颜色，并始终更改为其他颜色。所以线条是白色或红色，只有线条颜色改变，我可以点击线条或矩形。这段代码几乎运作良好。

还剩下两个问题：

如果单击矩形，则会将颜色更改为红色，但不会返回，
如果在1行之前是红色，则不会变为白色

我希望我很清楚，这就是我被困住的地方：

// 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 ++;
		var nextColor = (this.style.stroke == "red") ? "white" : "red";
		d3.select(".vline" + d.x.toString() + d.y.toString() + (d.x + 50).toString() + d.y.toString()).style("stroke", nextColor);
		d3.select(".vline" + d.x.toString() + (d.y + 50).toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", nextColor);
		d3.select(".hline" + d.x.toString() + d.y.toString() + d.x.toString() + (d.y + 50).toString()).style("stroke", nextColor);
		d3.select(".hline" + (d.x + 50).toString() + d.y.toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", nextColor);
	});

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", "white")
	.style("stroke-width", "4")
	.style("cursor", "pointer")
	.on("click", function(){var nextColor = this.style.stroke == "white" ? "red" : "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","red"); }
    // });

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; })
	.attr("click", function(d) { return d.click; })
	.style("stroke", "white")
	.style("stroke-width", "4")
	.style("cursor", "pointer")
	.on("click", function(){var nextColor = this.style.stroke == "white" ? "red" : "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","red"); }
    // });

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

Answer 1

line add selected.each（）

hline
    .each(function(d){
        d.switch = 0;
    })
vline
    .each(function(d){
        d.switch = 0;
    })

换行.on（＆＃34;点击＆＃34;）

hline
    .on("click",function(d){
        var Color = ["white","red"];
        //switch ===> 0 or 1 
        d.switch = d.switch ^ 1;
        //color ===> "white" or "red"
        var nextColor = Color[d.switch];
        d3.select(this).style("stroke", nextColor);
    })

vline
    .on("click",function(d){
        var Color = ["white","red"];
        //switch ===> 0 or 1 
        d.switch = d.switch ^ 1;
        //color ===> "white" or "red"
        var nextColor = Color[d.switch];
        d3.select(this).style("stroke", nextColor);
    })

rect change：

rect
.on("click", function(d){
    var Color = ["white" , "red"];
    d3.select(".vline" + d.x.toString() + d.y.toString() + (d.x + 50).toString() + d.y.toString()).style("stroke", Next_Color);
    d3.select(".vline" + d.x.toString() + (d.y + 50).toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", Next_Color);
    d3.select(".hline" + d.x.toString() + d.y.toString() + d.x.toString() + (d.y + 50).toString()).style("stroke", Next_Color);
    d3.select(".hline" + (d.x + 50).toString() + d.y.toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", Next_Color);
    function Next_Color(d){
        var Color = ["white","red"];
        d.switch = d.switch ^ 1;
        var next_Color = Color[d.switch];
        return next_Color;
    }
});

实施例

＆＃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){
		var Color = ["white" , "red"];
		d3.select(".vline" + d.x.toString() + d.y.toString() + (d.x + 50).toString() + d.y.toString()).style("stroke", Next_Color);
		d3.select(".vline" + d.x.toString() + (d.y + 50).toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", Next_Color);
		d3.select(".hline" + d.x.toString() + d.y.toString() + d.x.toString() + (d.y + 50).toString()).style("stroke", Next_Color);
		d3.select(".hline" + (d.x + 50).toString() + d.y.toString() + (d.x + 50).toString() + (d.y + 50).toString()).style("stroke", Next_Color);


        function Next_Color(d){
            var Color = ["white","red"];
            d.switch = d.switch ^ 1;
            var next_Color = Color[d.switch];
            return next_Color;
        }
	});

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", "white")
	.style("stroke-width", "4")
	.style("cursor", "pointer")
    .each(function(d){
        d.switch = 0;
    })
	.on("click", function(d){
        var Color = ["white","red"];
        d.switch = d.switch ^ 1;
        var nextColor = Color[d.switch];
        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","red"); }
    // });

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; })
	.attr("click", function(d) { return d.click; })
	.style("stroke", "white")
	.style("stroke-width", "4")
	.style("cursor", "pointer")
    .each(function(d){
        d.switch = 0;
    })
	.on("click", function(d){
        var Color = ["white","red"];
        d.switch = d.switch ^ 1;
        var nextColor = Color[d.switch];
        d3.select(this).style("stroke", nextColor);
        //var nextColor = this.style.stroke == "white" ? "red" : "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","red"); }
    // });

＆＃13;

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

＆＃13;

D3.js onclick切换其他线条颜色

1 个答案:

line add selected.each（）

换行.on（＆＃34;点击＆＃34;）

rect change：

实施例