具有onclick事件的功能图svg不起作用

时间：2018-11-18 09:00:21

标签： javascript svg onclick

https://jsfiddle.net/godgog/gh275nsr/52/

在上面的JFD中，我有3个功能。

  • 第一个graph()是绘制坐标系。
  • 第二个plot(x,y)是通过点（x，y）绘制函数y = ax ^ 2的图;
  • 第三个intPoint()是通过绘制黄色的<circle>来绘制整数点。

所有函数都起作用，但是如何为每个圆分配一个onclick()事件，该事件触发plot(centerX,centerY)函数通过圆的中心绘制图形？ 非常感谢！

var w = 500, h = 500;
var x0 = w/2, y0 = h/2; 
var scale = 30;
var str = '<svg width="' + w + '" height="' + h + '">';


function graph(point,project){ 

//number lines
//Ox
var x_ax = '<line x1="0" y1="' + y0 + '" x2="' + w + '" y2="' + y0 + '" stroke="rgb(0,0,0)" stroke-width="2" />';
    x_ax += '<polyline points="' + (w-10) + ',' + (y0-5) + ' ' + w + ',' + y0 + ' ' + (w-10) + ',' + (y0+5) + '" stroke="rgb(0,0,0)" stroke-width="1" fill="none" />';
    x_ax += '<text x="' + (w-10) + '" y="' + (y0+15) + '" font-size="15">x</text>';
//Oy
var y_ax = '<line x1="' + x0 + '" y1="0" x2="' + x0 + '" y2="' + h + '" stroke="rgb(0,0,0)" stroke-width="2" />';
    y_ax += '<polyline points="' + (x0-5) + ',' + 10 + ' ' + x0 + ',' + 0 + ' ' + (x0+5) + ',' + 10 + '" stroke="rgb(0,0,0)" stroke-width="1" fill="none"/>';
    y_ax += '<text x="' + (x0-15) + '" y="' + 10 + '" font-size="15">y</text>';
    y_ax += '<text x="' + (x0-15) + '" y="' + (y0+15) + '" font-size="15">O</text>';

for(var i=1; i<= Math.floor((h-y0)/scale); i++){ //horizontal lines
 str += '<line x1="0" y1="' + (y0+ i*scale) + '" x2="' + w + '" y2="' + (y0+i*scale) + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0+5) + '" y="' + (y0+i*scale - 5) + '" font-size="12">' + (-i) + '</text>';
};

for(var i=1; i<= Math.floor(y0/scale); i++){ //horizontal lines, >0
 str += '<line x1="0" y1="' + (y0- i*scale) + '" x2="' + w + '" y2="' + (y0-i*scale) + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0+5) + '" y="' + (y0-i*scale + 12) + '" font-size="12">' + (i) + '</text>';
};

for(var i=1; i<= Math.floor((w-x0)/scale); i++){ //vertical lines
 str += '<line x1="' + (x0+i*scale) + '" y1="0" x2="' + (x0+i*scale) + '" y2="' + h + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0+i*scale - 5) + '" y="' + (y0 - 5) + '" font-size="12">' + i + '</text>';
};

for(var i=1; i<= Math.floor(x0/scale); i++){ //vertical lines >0
 str += '<line x1="' + (x0-i*scale) + '" y1="0" x2="' + (x0-i*scale) + '" y2="' + h + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0-i*scale - 5) + '" y="' + (y0- 5) + '" font-size="12">' + (-i) + '</text>';
};



//points
for(i = 0; i < point.length; i++){
 str += '<circle cx="'+ (x0+point[i][1]*scale) +'" cy="' + (y0-point[i][2]*scale) + '" r="3" stroke="none" fill="red" />';
 str += '<text x="' + (x0+point[i][1]*scale+ ((point[i][1]>0)? 5 : -15)) + '" y="' + (y0-point[i][2]*scale+7) + '" font-size="16">' + point[i][0] + '</text>';

//project
if(project){
 str += '<line x1="' + (x0+point[i][1]*scale) + '" y1="' + (y0-point[i][2]*scale) + '" x2="' + x0 + '" y2="' + (y0-point[i][2]*scale) + '" stroke="#ff8080" stroke-width="2" stroke-dasharray="7" />';
 str += '<line x1="' + (x0+point[i][1]*scale) + '" y1="' + (y0-point[i][2]*scale) + '" x2="' + (x0+point[i][1]*scale) + '" y2="' + y0 + '" stroke="#ff8080" stroke-width="2" stroke-dasharray="7" />';
};
};

return str + x_ax + y_ax;
};

function plot(x,y){ //plot y=ax^2
var s = '';
var a = scale*(y0-y)/((x-x0)*(x-x0));
function g(x){return a*x*x};	
 // graph
var xx1, yy1, xx2, yy2, dx = 1 //interval 
var iMax = Math.floor((w - x0)/dx), iMin = -Math.floor(x0/dx);
var color = ["green", "blue", "magenta", "aqua" , "pink"];

for (var i=iMin; i<= iMax; i++){
 xx1= dx*i; yy1 = scale*g(xx1/scale);
 xx2= dx*(i+1); yy2 = scale*g(xx2/scale);
 s += '<line x1="' + (x0+xx1) + '" y1="' + (y0-yy1)+ '" x2="' + (x0+xx2) + '" y2="' + (y0-yy2) + '" stroke="' + color[0] + '" stroke-width="1.6" />';
};
  return s;
};


//draw integer points, 
function intPoint(){
var s = '';
for(i = -Math.floor(w/scale); i < Math.floor(w/scale); i++){
	for(j = -Math.floor(h/scale); j < Math.floor(h/scale); j++){
		s += '<circle cx="'+ (x0+i*scale) +'" cy="' + (y0-j*scale) + '" r="3" onclick="plot(' + (x0+i*scale) + ',' + (y0-j*scale) + ')" stroke="none" fill="red" />';
	};
};
 return s + '';
};

var svg = str + graph([]) + intPoint() + '</svg>'

document.getElementById("demo").innerHTML = str + graph([]) + intPoint() + plot(280,220) + '</svg>';
<p id="demo">

</p>

1 个答案:

答案 0 :(得分：1)

您的问题是，在单击事件上，您正在调用plot()函数。该函数所做的只是返回带有新行定义的字符串（即"<line ...>"）。您不会对该字符串执行任何操作。

解决此问题的一种方法是将onclick更改为调用新函数（例如replot()），该函数将完全重新生成图形。

function replot(x,y) {
  document.getElementById("demo").innerHTML = str + graph([]) + intPoint() + plot(x,y) + '</svg>';
}

更新程序：

var w = 500, h = 500;
var x0 = w/2, y0 = h/2; 
var scale = 30;
var str = '<svg width="' + w + '" height="' + h + '">';


function graph(point,project){ 

//number lines
//Ox
var x_ax = '<line x1="0" y1="' + y0 + '" x2="' + w + '" y2="' + y0 + '" stroke="rgb(0,0,0)" stroke-width="2" />';
    x_ax += '<polyline points="' + (w-10) + ',' + (y0-5) + ' ' + w + ',' + y0 + ' ' + (w-10) + ',' + (y0+5) + '" stroke="rgb(0,0,0)" stroke-width="1" fill="none" />';
    x_ax += '<text x="' + (w-10) + '" y="' + (y0+15) + '" font-size="15">x</text>';
//Oy
var y_ax = '<line x1="' + x0 + '" y1="0" x2="' + x0 + '" y2="' + h + '" stroke="rgb(0,0,0)" stroke-width="2" />';
    y_ax += '<polyline points="' + (x0-5) + ',' + 10 + ' ' + x0 + ',' + 0 + ' ' + (x0+5) + ',' + 10 + '" stroke="rgb(0,0,0)" stroke-width="1" fill="none"/>';
    y_ax += '<text x="' + (x0-15) + '" y="' + 10 + '" font-size="15">y</text>';
    y_ax += '<text x="' + (x0-15) + '" y="' + (y0+15) + '" font-size="15">O</text>';

for(var i=1; i<= Math.floor((h-y0)/scale); i++){ //horizontal lines
 str += '<line x1="0" y1="' + (y0+ i*scale) + '" x2="' + w + '" y2="' + (y0+i*scale) + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0+5) + '" y="' + (y0+i*scale - 5) + '" font-size="12">' + (-i) + '</text>';
};

for(var i=1; i<= Math.floor(y0/scale); i++){ //horizontal lines, >0
 str += '<line x1="0" y1="' + (y0- i*scale) + '" x2="' + w + '" y2="' + (y0-i*scale) + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0+5) + '" y="' + (y0-i*scale + 12) + '" font-size="12">' + (i) + '</text>';
};

for(var i=1; i<= Math.floor((w-x0)/scale); i++){ //vertical lines
 str += '<line x1="' + (x0+i*scale) + '" y1="0" x2="' + (x0+i*scale) + '" y2="' + h + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0+i*scale - 5) + '" y="' + (y0 - 5) + '" font-size="12">' + i + '</text>';
};

for(var i=1; i<= Math.floor(x0/scale); i++){ //vertical lines >0
 str += '<line x1="' + (x0-i*scale) + '" y1="0" x2="' + (x0-i*scale) + '" y2="' + h + '" stroke="rgb(0,0,0)" stroke-width="0.5" />';
 str += '<text x="' + (x0-i*scale - 5) + '" y="' + (y0- 5) + '" font-size="12">' + (-i) + '</text>';
};



//points
for(i = 0; i < point.length; i++){
 str += '<circle cx="'+ (x0+point[i][1]*scale) +'" cy="' + (y0-point[i][2]*scale) + '" r="3" stroke="none" fill="red" />';
 str += '<text x="' + (x0+point[i][1]*scale+ ((point[i][1]>0)? 5 : -15)) + '" y="' + (y0-point[i][2]*scale+7) + '" font-size="16">' + point[i][0] + '</text>';

//project
if(project){
 str += '<line x1="' + (x0+point[i][1]*scale) + '" y1="' + (y0-point[i][2]*scale) + '" x2="' + x0 + '" y2="' + (y0-point[i][2]*scale) + '" stroke="#ff8080" stroke-width="2" stroke-dasharray="7" />';
 str += '<line x1="' + (x0+point[i][1]*scale) + '" y1="' + (y0-point[i][2]*scale) + '" x2="' + (x0+point[i][1]*scale) + '" y2="' + y0 + '" stroke="#ff8080" stroke-width="2" stroke-dasharray="7" />';
};
};

return str + x_ax + y_ax;
};

function plot(x,y){ //plot y=ax^2
var s = '';
var a = scale*(y0-y)/((x-x0)*(x-x0));
function g(x){return a*x*x};	
 // graph
var xx1, yy1, xx2, yy2, dx = 1 //interval 
var iMax = Math.floor((w - x0)/dx), iMin = -Math.floor(x0/dx);
var color = ["green", "blue", "magenta", "aqua" , "pink"];

for (var i=iMin; i<= iMax; i++){
 xx1= dx*i; yy1 = scale*g(xx1/scale);
 xx2= dx*(i+1); yy2 = scale*g(xx2/scale);
 s += '<line x1="' + (x0+xx1) + '" y1="' + (y0-yy1)+ '" x2="' + (x0+xx2) + '" y2="' + (y0-yy2) + '" stroke="' + color[0] + '" stroke-width="1.6" />';
};
  return s;
};


//draw integer points, 
function intPoint(){
var s = '';
for(i = -Math.floor(w/scale); i < Math.floor(w/scale); i++){
	for(j = -Math.floor(h/scale); j < Math.floor(h/scale); j++){
		s += '<circle cx="'+ (x0+i*scale) +'" cy="' + (y0-j*scale) + '" r="3" onclick="replot(' + (x0+i*scale) + ',' + (y0-j*scale) + ')" stroke="none" fill="red" />';
	};
};
 return s + '';
};

function replot(x,y) {
  document.getElementById("demo").innerHTML = str + graph([]) + intPoint() + plot(x,y) + '</svg>';
}

var svg = str + graph([]) + intPoint() + '</svg>'

document.getElementById("demo").innerHTML = str + graph([]) + intPoint() + plot(280,220) + '</svg>';
<p id="demo">

</p>

相关问题
最新问题