本文介绍了为什么d3.js-lasso不读取SVG变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
https://jsfiddle.net/t52f1rn7/
我试图制作一个在行尾带有圆圈的线图，我想选择两个点并通过单击画线，然后我找到套索插件，并试图将其用于相同的目的:选择两个点并连接它们.有可能吗?
I am trying to make a line graph with circles at the end of lines.I want to select two points and draw line by click.Then I found lasso plugin and I am trying to use it for the same purpose:selecting two points and connecting them.Is it possible?
当前我的代码正在显示无法读取未定义的属性"forEach"?
Currently my code is Showing cannot read property "forEach" of undefined?
为什么它不读取套索中的圆圈和svg变量?
why its not reading circles and svg variables in lasso?
body
{
background-color : black;
}
svg
{
background-color: white;
}
/* Styling for new <div> */
#tooltip {
position: absolute;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 5px;
width: 30px;
height: 12px;
color: white;
font-size: 10px;
font-weight: bold;
text-align: center;
background-color: black;
opacity: 0;
}
.lasso path {
stroke: rgb(80,80,80);
stroke-width:2px;
}
.lasso .drawn {
fill-opacity:.05 ;
}
.lasso .loop_close {
fill:none;
stroke-dasharray: 4,4;
}
.lasso .origin {
fill:#3399FF;
fill-opacity:.5;
}
.not_possible {
fill: rgb(200,200,200);
}
.possible {
fill: #EC888C;
}
.selected {
fill: steelblue;
}
var w = 500;
var h = 500;
var padding = 40;
var tt = 4000;
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var data1 = [];
var i = 50;
var p = Math.random()*1000;
var q = Math.random()*1000;
for(var j=0;j<i;j++)
{
var a = j;
var b = Math.round(Math.random()* q);
data1.push({
a:a,
b:b
})
}
console.log(data1);
var xscale = d3.scaleLinear()
.domain([0,d3.max(data1,function(d)
{
return d.a;
})])
.rangeRound([padding,w-padding]);
var yscale = d3.scaleLinear()
.domain([0,d3.max(data1,function(d)
{
return d.b;
})])
.rangeRound([h-padding,padding]);
var xaxis = d3.axisBottom(xscale)
.ticks(10);
var yaxis = d3.axisLeft(yscale)
.ticks(10);
var l = data1.length;
var line = d3.line()
.x(function(d)
{
return xscale(d.a);
})
.y(function(d)
{
return yscale(d.b);
});
var paths = svg.append("path")
.datum(data1)
.attr("fill","none")
.attr("stroke","pink")
.attr("stroke-linejoin","round")
.attr("stroke-linecap","round")
.attr("stroke-width",1.5)
.attr("d",line);
var len = paths.node().getTotalLength();
paths
.attr("stroke-dasharray",len+" " +len)
.attr("stroke-dashoffset",len)
.transition()
.duration(tt)
.attr("stroke-dashoffset",0);
var circles = svg.selectAll("circle")
.data(data1)
.enter()
.append("circle")
.attr("cx",function(d)
{
return xscale(d.a);
})
.attr("cy",function(d)
{
return yscale(d.b);
})
.attr("r",5)
.attr("fill","blue")
.attr("cursor","pointer");
/*.on("mouseover", function(d) {
var x = d3.event.pageX;
var y = d3.event.pageY - 20;
d3.select("#tooltip")
.style("left", x + "px")
.style("top", y + "px")
.style("opacity", 1)
.text(d.a + "," + d.b);
})
.on("mouseout", function() {
d3.select("#tooltip")
.style("opacity", 0);
})*/
svg.append("g")
.attr("transform","translate(0"+","+(h-padding)+")")
.call(xaxis);
svg.append("g")
.attr("transform","translate("+padding+","+"0)")
.call(yaxis);
circles
.on("click",function(d)
{
alert(d.a+","+d.b);
});
// Lasso functions
var lasso_start = function() {
lasso.items()
.attr("r",3.5) // reset size
.classed("not_possible",true)
.classed("selected",false);
};
var lasso_draw = function() {
// Style the possible dots
lasso.possibleItems()
.classed("not_possible",false)
.classed("possible",true);
// Style the not possible dot
lasso.notPossibleItems()
.classed("not_possible",true)
.classed("possible",false);
};
var lasso_end = function() {
// Reset the color of all dots
lasso.items()
.classed("not_possible",false)
.classed("possible",false);
// Style the selected dots
lasso.selectedItems()
.classed("selected",true)
.attr("r",7);
// Reset the style of the not selected dots
lasso.notSelectedItems()
.attr("r",3.5);
};
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(circles)
.targetArea(svg)
.on("start",lasso_start)
.on("draw",lasso_draw)
.on("end",lasso_end);
svg.call(lasso);
推荐答案
看起来像lasso.min.js无法正常工作.必须是一个错误.我刚刚在脚本标记中复制并粘贴了套索的工作版本.查看小提琴.
Looks like the lasso.min.js doesn't work. Must be a bug. I've just copied and pasted the working version of lasso in the script tag. Check out the fiddle.
var w = 500;
var h = 500;
var padding = 40;
var tt = 4000;
var svg = d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
var data1 = [];
var i = 50;
var p = Math.random()*1000;
var q = Math.random()*1000;
for(var j=0;j<i;j++)
{
var a = j;
var b = Math.round(Math.random()* q);
data1.push({
a:a,
b:b
})
}
console.log(data1);
var xscale = d3.scaleLinear()
.domain([0,d3.max(data1,function(d)
{
return d.a;
})])
.rangeRound([padding,w-padding]);
var yscale = d3.scaleLinear()
.domain([0,d3.max(data1,function(d)
{
return d.b;
})])
.rangeRound([h-padding,padding]);
var xaxis = d3.axisBottom(xscale)
.ticks(10);
var yaxis = d3.axisLeft(yscale)
.ticks(10);
var l = data1.length;
var line = d3.line()
.x(function(d)
{
return xscale(d.a);
})
.y(function(d)
{
return yscale(d.b);
});
var paths = svg.append("path")
.datum(data1)
.attr("fill","none")
.attr("stroke","pink")
.attr("stroke-linejoin","round")
.attr("stroke-linecap","round")
.attr("stroke-width",1.5)
.attr("d",line);
var len = paths.node().getTotalLength();
paths
.attr("stroke-dasharray",len+" " +len)
.attr("stroke-dashoffset",len)
.transition()
.duration(tt)
.attr("stroke-dashoffset",0);
var circles = svg.selectAll("circle")
.data(data1)
.enter()
.append("circle")
.attr("cx",function(d)
{
return xscale(d.a);
})
.attr("cy",function(d)
{
return yscale(d.b);
})
.attr("r",5)
.attr("fill","blue")
.attr("cursor","pointer");
/*.on("mouseover", function(d) {
var x = d3.event.pageX;
var y = d3.event.pageY - 20;
d3.select("#tooltip")
.style("left", x + "px")
.style("top", y + "px")
.style("opacity", 1)
.text(d.a + "," + d.b);
})
.on("mouseout", function() {
d3.select("#tooltip")
.style("opacity", 0);
})*/
svg.append("g")
.attr("transform","translate(0"+","+(h-padding)+")")
.call(xaxis);
svg.append("g")
.attr("transform","translate("+padding+","+"0)")
.call(yaxis);
circles
.on("click",function(d)
{
alert(d.a+","+d.b);
});
// Lasso functions
var lasso_start = function() {
lasso.items()
.attr("r",3.5) // reset size
.classed("not_possible",true)
.classed("selected",false);
};
var lasso_draw = function() {
// Style the possible dots
lasso.possibleItems()
.classed("not_possible",false)
.classed("possible",true);
// Style the not possible dot
lasso.notPossibleItems()
.classed("not_possible",true)
.classed("possible",false);
};
var lasso_end = function() {
// Reset the color of all dots
lasso.items()
.classed("not_possible",false)
.classed("possible",false);
// Style the selected dots
lasso.selectedItems()
.classed("selected",true)
.attr("r",7);
// Reset the style of the not selected dots
lasso.notSelectedItems()
.attr("r",3.5);
};
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(circles)
.targetArea(svg)
.on("start",lasso_start)
.on("draw",lasso_draw)
.on("end",lasso_end);
svg.call(lasso);circle {
fill-opacity: 0.5;
}
.lasso path {
stroke: rgb(80, 80, 80);
stroke-width: 2px;
}
.lasso .drawn {
fill-opacity: .05;
}
.lasso .loop_close {
fill: none;
stroke-dasharray: 4, 4;
}
.lasso .origin {
fill: #3399FF;
fill-opacity: .5;
}
.not_possible {
fill: rgb(200, 200, 200);
}
.possible {
fill: #EC888C;
}
.selected {
fill: steelblue;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3-selection"),require("d3-drag")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-drag"],n):n(t.d3=t.d3||{},t.d3,t.d3)}(this,function(t,n,r){"use strict";function e(t,n){return n={exports:{}},t(n,n.exports),n.exports}function o(){function t(t){function u(){p=[],h="",_.attr("d",null),m.attr("d",null),r.nodes().forEach(function(t){t.__lasso.possible=!1,t.__lasso.selected=!1,t.__lasso.hoverSelect=!1,t.__lasso.loopSelect=!1;var n=t.getBoundingClientRect();t.__lasso.lassoPoint=[Math.round(n.left+n.width/2),Math.round(n.top+n.height/2)]}),s&&r.on("mouseover.lasso",function(){this.__lasso.hoverSelect=!0}),i.start()}function l(){var t,n;"touchmove"===d3.event.sourceEvent.type?(t=d3.event.sourceEvent.touches[0].clientX,n=d3.event.sourceEvent.touches[0].clientY):(t=d3.event.sourceEvent.clientX,n=d3.event.sourceEvent.clientY);var s=d3.mouse(this)[0],u=d3.mouse(this)[1];""===h?(h=h+"M "+s+" "+u,v=[t,n],d=[s,u],b.attr("cx",s).attr("cy",u).attr("r",7).attr("display",null)):h=h+" L "+s+" "+u,p.push([t,n]);var l=Math.sqrt(Math.pow(t-v[0],2)+Math.pow(n-v[1],2)),f="M "+s+" "+u+" L "+d[0]+" "+d[1];_.attr("d",h),m.attr("d",f),a=l<=e,a&&o?m.attr("display",null):m.attr("display","none"),r.nodes().forEach(function(t){t.__lasso.loopSelect=!(!a||!o)&&c(p,t.__lasso.lassoPoint)<1,t.__lasso.possible=t.__lasso.hoverSelect||t.__lasso.loopSelect}),i.draw()}function f(){r.on("mouseover.lasso",null),r.nodes().forEach(function(t){t.__lasso.selected=t.__lasso.possible,t.__lasso.possible=!1}),_.attr("d",null),m.attr("d",null),b.attr("display","none"),i.end()}var h,v,d,p,g=t.append("g").attr("class","lasso"),_=g.append("path").attr("class","drawn"),m=g.append("path").attr("class","loop_close"),b=g.append("circle").attr("class","origin"),M=d3.drag().on("start",u).on("drag",l).on("end",f);n.call(M)}var n,r=[],e=75,o=!0,a=!1,s=!0,i={start:function(){},draw:function(){},end:function(){}};return t.items=function(n){if(!arguments.length)return r;r=n;var e=r.nodes();return e.forEach(function(t){t.__lasso={possible:!1,selected:!1}}),t},t.possibleItems=function(){return r.filter(function(){return this.__lasso.possible})},t.selectedItems=function(){return r.filter(function(){return this.__lasso.selected})},t.notPossibleItems=function(){return r.filter(function(){return!this.__lasso.possible})},t.notSelectedItems=function(){return r.filter(function(){return!this.__lasso.selected})},t.closePathDistance=function(n){return arguments.length?(e=n,t):e},t.closePathSelect=function(n){return arguments.length?(o=n===!0,t):o},t.isPathClosed=function(n){return arguments.length?(a=n===!0,t):a},t.hoverSelect=function(n){return arguments.length?(s=n===!0,t):s},t.on=function(n,r){if(!arguments.length)return i;if(1===arguments.length)return i[n];var e=["start","draw","end"];return e.indexOf(n)>-1&&(i[n]=r),t},t.targetArea=function(r){return arguments.length?(n=r,t):n},t}var a=e(function(t){function n(t,n,e){var o=t*n,a=r*t,s=a-t,i=a-s,u=t-i,l=r*n,f=l-n,c=l-f,h=n-c,v=o-i*c,d=v-u*c,p=d-i*h,g=u*h-p;return e?(e[0]=g,e[1]=o,e):[g,o]}t.exports=n;var r=+(Math.pow(2,27)+1)}),s=e(function(t){function n(t,n){var r=t+n,e=r-t,o=r-e,a=n-e,s=t-o,i=s+a;return i?[i,r]:[r]}function r(t,r){var e=0|t.length,o=0|r.length;if(1===e&&1===o)return n(t[0],r[0]);var a,s,i=e+o,u=new Array(i),l=0,f=0,c=0,h=Math.abs,v=t[f],d=h(v),p=r[c],g=h(p);d<g?(s=v,f+=1,f<e&&(v=t[f],d=h(v))):(s=p,c+=1,c<o&&(p=r[c],g=h(p))),f<e&&d<g||c>=o?(a=v,f+=1,f<e&&(v=t[f],d=h(v))):(a=p,c+=1,c<o&&(p=r[c],g=h(p)));for(var _,m,b,M,y,w=a+s,x=w-a,j=s-x,E=j,A=w;f<e&&c<o;)d<g?(a=v,f+=1,f<e&&(v=t[f],d=h(v))):(a=p,c+=1,c<o&&(p=r[c],g=h(p))),s=E,w=a+s,x=w-a,j=s-x,j&&(u[l++]=j),_=A+w,m=_-A,b=_-m,M=w-m,y=A-b,E=y+M,A=_;for(;f<e;)a=v,s=E,w=a+s,x=w-a,j=s-x,j&&(u[l++]=j),_=A+w,m=_-A,b=_-m,M=w-m,y=A-b,E=y+M,A=_,f+=1,f<e&&(v=t[f]);for(;c<o;)a=p,s=E,w=a+s,x=w-a,j=s-x,j&&(u[l++]=j),_=A+w,m=_-A,b=_-m,M=w-m,y=A-b,E=y+M,A=_,c+=1,c<o&&(p=r[c]);return E&&(u[l++]=E),A&&(u[l++]=A),l||(u[l++]=0),u.length=l,u}t.exports=r}),i=e(function(t){function n(t,n,r){var e=t+n,o=e-t,a=e-o,s=n-o,i=t-a;return r?(r[0]=i+s,r[1]=e,r):[i+s,e]}t.exports=n}),u=e(function(t){function n(t,n){var o=t.length;if(1===o){var a=r(t[0],n);return a[0]?a:[a[1]]}var s=new Array(2*o),i=[.1,.1],u=[.1,.1],l=0;r(t[0],n,i),i[0]&&(s[l++]=i[0]);for(var f=1;f<o;++f){r(t[f],n,u);var c=i[1];e(c,u[0],i),i[0]&&(s[l++]=i[0]);var h=u[1],v=i[1],d=h+v,p=d-h,g=v-p;i[1]=d,g&&(s[l++]=g)}return i[1]&&(s[l++]=i[1]),0===l&&(s[l++]=0),s.length=l,s}var r=a,e=i;t.exports=n}),l=e(function(t){function n(t,n){var r=t+n,e=r-t,o=r-e,a=n-e,s=t-o,i=s+a;return i?[i,r]:[r]}function r(t,r){var e=0|t.length,o=0|r.length;if(1===e&&1===o)return n(t[0],-r[0]);var a,s,i=e+o,u=new Array(i),l=0,f=0,c=0,h=Math.abs,v=t[f],d=h(v),p=-r[c],g=h(p);d<g?(s=v,f+=1,f<e&&(v=t[f],d=h(v))):(s=p,c+=1,c<o&&(p=-r[c],g=h(p))),f<e&&d<g||c>=o?(a=v,f+=1,f<e&&(v=t[f],d=h(v))):(a=p,c+=1,c<o&&(p=-r[c],g=h(p)));for(var _,m,b,M,y,w=a+s,x=w-a,j=s-x,E=j,A=w;f<e&&c<o;)d<g?(a=v,f+=1,f<e&&(v=t[f],d=h(v))):(a=p,c+=1,c<o&&(p=-r[c],g=h(p))),s=E,w=a+s,x=w-a,j=s-x,j&&(u[l++]=j),_=A+w,m=_-A,b=_-m,M=w-m,y=A-b,E=y+M,A=_;for(;f<e;)a=v,s=E,w=a+s,x=w-a,j=s-x,j&&(u[l++]=j),_=A+w,m=_-A,b=_-m,M=w-m,y=A-b,E=y+M,A=_,f+=1,f<e&&(v=t[f]);for(;c<o;)a=p,s=E,w=a+s,x=w-a,j=s-x,j&&(u[l++]=j),_=A+w,m=_-A,b=_-m,M=w-m,y=A-b,E=y+M,A=_,c+=1,c<o&&(p=-r[c]);return E&&(u[l++]=E),A&&(u[l++]=A),l||(u[l++]=0),u.length=l,u}t.exports=r}),f=e(function(t){function n(t,n){for(var r=new Array(t.length-1),e=1;e<t.length;++e)for(var o=r[e-1]=new Array(t.length-1),a=0,s=0;a<t.length;++a)a!==n&&(o[s++]=t[e][a]);return r}function r(t){for(var n=new Array(t),r=0;r<t;++r){n[r]=new Array(t);for(var e=0;e<t;++e)n[r][e]=["m",e,"[",t-r-1,"]"].join("")}return n}function e(t){return 1&t?"-":""}function o(t){if(1===t.length)return t[0];if(2===t.length)return["sum(",t[0],",",t[1],")"].join("");var n=t.length>>1;return["sum(",o(t.slice(0,n)),",",o(t.slice(n)),")"].join("")}function i(t){if(2===t.length)return[["sum(prod(",t[0][0],",",t[1][1],"),prod(-",t[0][1],",",t[1][0],"))"].join("")];for(var r=[],a=0;a<t.length;++a)r.push(["scale(",o(i(n(t,a))),",",e(a),t[0][a],")"].join(""));return r}function f(t){for(var e=[],a=[],s=r(t),u=[],l=0;l<t;++l)0===(1&l)?e.push.apply(e,i(n(s,l))):a.push.apply(a,i(n(s,l))),u.push("m"+l);var f=o(e),c=o(a),h="orientation"+t+"Exact",_=["function ",h,"(",u.join(),"){var p=",f,",n=",c,",d=sub(p,n);return d[d.length-1];};return ",h].join(""),m=new Function("sum","prod","scale","sub",_);return m(d,v,p,g)}function c(t){var n=x[t.length];return n||(n=x[t.length]=f(t.length)),n.apply(void 0,t)}function h(){for(;x.length<=_;)x.push(f(x.length));for(var n=[],r=["slow"],e=0;e<=_;++e)n.push("a"+e),r.push("o"+e);for(var o=["function getOrientation(",n.join(),"){switch(arguments.length){case 0:case 1:return 0;"],e=2;e<=_;++e)o.push("case ",e,":return o",e,"(",n.slice(0,e).join(),");");o.push("}var s=new Array(arguments.length);for(var i=0;i<arguments.length;++i){s[i]=arguments[i]};return slow(s);}return getOrientation"),r.push(o.join(""));var a=Function.apply(void 0,r);t.exports=a.apply(void 0,[c].concat(x));for(var e=0;e<=_;++e)t.exports[e]=x[e]}var v=a,d=s,p=u,g=l,_=5,m=1.1102230246251565e-16,b=(3+16*m)*m,M=(7+56*m)*m,y=f(3),w=f(4),x=[function(){return 0},function(){return 0},function(t,n){return n[0]-t[0]},function(t,n,r){var e,o=(t[1]-r[1])*(n[0]-r[0]),a=(t[0]-r[0])*(n[1]-r[1]),s=o-a;if(o>0){if(a<=0)return s;e=o+a}else{if(!(o<0))return s;if(a>=0)return s;e=-(o+a)}var i=b*e;return s>=i||s<=-i?s:y(t,n,r)},function(t,n,r,e){var o=t[0]-e[0],a=n[0]-e[0],s=r[0]-e[0],i=t[1]-e[1],u=n[1]-e[1],l=r[1]-e[1],f=t[2]-e[2],c=n[2]-e[2],h=r[2]-e[2],v=a*l,d=s*u,p=s*i,g=o*l,_=o*u,m=a*i,b=f*(v-d)+c*(p-g)+h*(_-m),y=(Math.abs(v)+Math.abs(d))*Math.abs(f)+(Math.abs(p)+Math.abs(g))*Math.abs(c)+(Math.abs(_)+Math.abs(m))*Math.abs(h),x=M*y;return b>x||-b>x?b:w(t,n,r,e)}];h()}),c=e(function(t){function n(t,n){for(var e=n[0],o=n[1],a=t.length,s=1,i=a,u=0,l=a-1;u<i;l=u++){var f=t[u],c=t[l],h=f[1],v=c[1];if(v<h){if(v<o&&o<h){var d=r(f,c,n);if(0===d)return 0;s^=0<d|0}else if(o===h){var p=t[(u+1)%a],g=p[1];if(h<g){var d=r(f,c,n);if(0===d)return 0;s^=0<d|0}}}else if(h<v){if(h<o&&o<v){var d=r(f,c,n);if(0===d)return 0;s^=d<0|0}else if(o===h){var p=t[(u+1)%a],g=p[1];if(g<h){var d=r(f,c,n);if(0===d)return 0;s^=d<0|0}}}else if(o===h){var _=Math.min(f[0],c[0]),m=Math.max(f[0],c[0]);if(0===u){for(;l>0;){var b=(l+a-1)%a,M=t[b];if(M[1]!==o)break;var y=M[0];_=Math.min(_,y),m=Math.max(m,y),l=b}if(0===l)return _<=e&&e<=m?0:1;i=l+1}for(var w=t[(l+a-1)%a][1];u+1<i;){var M=t[u+1];if(M[1]!==o)break;var y=M[0];_=Math.min(_,y),m=Math.max(m,y),u+=1}if(_<=e&&e<=m)return 0;var x=t[(u+1)%a][1];e<_&&w<o!=x<o&&(s^=1)}}return 2*s-1}t.exports=n;var r=f});t.lasso=o,Object.defineProperty(t,"__esModule",{value:!0})});</script>这篇关于为什么d3.js-lasso不读取SVG变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！