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

标签 javascript html d3.js

你能帮我看看为什么它不能正常工作吗？

这是一个物理演示，其概念是，如果我单击它，我可以更改线条的颜色，当我单击矩形时，我想更改所有边(其周围的线条)的颜色，并始终更改为其他颜色。所以线条是白色或红色的，只有线条颜色改变，我可以单击线条或矩形。这段代码几乎可以正常工作。

剩下两个问题:

  1. 如果单击矩形，其边会将颜色更改为红色，但不会变回红色，

  2. 如果前 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>

最佳答案

行添加 selected.each()

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

换行.on(“点击”)

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
.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;
    }
});

示例

// 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"); }
    // });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="grid"></div>

关于javascript - D3.js onclick切换其他线条颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45226063/

上一篇：javascript - 如何将一个完全不同的 HTML 文件导入到 iframe 中？

下一篇：javascript - 在 JavaScript 中以分层方式构建数据

相关文章：

javascript - 如果所有数据库操作都通过 Mongoose 完成，注入(inject)仍然是一个问题吗？

javascript - 线性插值在经典柏林噪声中如何工作？

javascript - 如何将两个 d3 对象合并为一个以进行批量操作

javascript - .data() 处的 D3 新数据使 svg 重绘而不是更新节点位置

javascript - 使用 jquery 通过侧边栏呈现不同的页面？

java - 如何在 Java 中编辑 html 字符串中的标签

html - Firefox 旋转变换的绝对定位问题

android - android 中的 html5 Canvas

javascript - 如何用图像替换气泡？

javascript - 使用Django block 的JS文件上传队列

©2024 IT工具网  联系我们