如何使 d3-lasso 在 d3 力定向网络上工作?
How to make d3-lasso working on d3 forcedirected network?
我尝试了几种不同的更改来使我的套索正常工作,但我不断收到以下错误。
这是作者完成的我的 lasso
实现。
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(node)
.targetArea(this.svg)
.on("start", lasso_start)
.on("draw", lasso_draw)
.on("end", lasso_end);
//self.svg.call(lasso);
// Lasso functions
var lasso_start = function () {
lasso.items()
.attr("r", 8) // 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", 10);
// Reset the style of the not selected dots
lasso.notSelectedItems()
.attr("r", 8);
};
this.svg.call(lasso);
但是每当我 运行 这个时候,我总是得到上面的错误,我不知道为什么。
我使用了 here
的缩小版 d3-lasso
您似乎在声明变量之前使用它们。更改顺序,以便变量(套索函数)在使用前声明,应该没问题。
// Lasso functions
var lasso_start = function() {
lasso.items()
.attr("r", 8) // 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", 10);
// Reset the style of the not selected dots
lasso.notSelectedItems()
.attr("r", 8);
};
// initialize lasso
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(node)
.targetArea(this.svg)
.on("start", lasso_start)
.on("draw", lasso_draw)
.on("end", lasso_end);
this.svg.call(lasso);
我尝试了几种不同的更改来使我的套索正常工作,但我不断收到以下错误。
这是作者完成的我的 lasso
实现。
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(node)
.targetArea(this.svg)
.on("start", lasso_start)
.on("draw", lasso_draw)
.on("end", lasso_end);
//self.svg.call(lasso);
// Lasso functions
var lasso_start = function () {
lasso.items()
.attr("r", 8) // 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", 10);
// Reset the style of the not selected dots
lasso.notSelectedItems()
.attr("r", 8);
};
this.svg.call(lasso);
但是每当我 运行 这个时候,我总是得到上面的错误,我不知道为什么。
我使用了 here
的缩小版d3-lasso
您似乎在声明变量之前使用它们。更改顺序,以便变量(套索函数)在使用前声明,应该没问题。
// Lasso functions
var lasso_start = function() {
lasso.items()
.attr("r", 8) // 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", 10);
// Reset the style of the not selected dots
lasso.notSelectedItems()
.attr("r", 8);
};
// initialize lasso
var lasso = d3.lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(node)
.targetArea(this.svg)
.on("start", lasso_start)
.on("draw", lasso_draw)
.on("end", lasso_end);
this.svg.call(lasso);