套索和 D3.js
Lasso and D3.js
我以为我遇到了与这个 SO 用户类似的问题 ,但是在将缩小的套索库换成实际的套索代码后,我仍然没有得到有效的输出。
我的代码与 lasso git 集线器上的示例代码大致相同(我已经对我的设置进行了必要的更改),所以理论上我不应该有任何问题,正确的?
我只想在附加我自己的样式并返回任何数据之前让套索本身正常工作。
<script>
var data = [["Arsenal",-0.0032967741593940836, 0.30399753945657115],["Chelsea", 0.2752159801936051, -0.0389675484210763], ["Liverpool",-0.005096951348655329, 0.026678627680541075], ["Manchester City",-0.004715381791104284, -0.12338379196523988], ["Manchester United",0.06877966010653305, -0.0850615090351779], ["Tottenham",-0.3379518099485709, -0.09933664174939877]];
const colours = d3.scaleOrdinal()
.domain(data)
.range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);
var canvasW = 675;
var canvasH = 400;
var w = 365;
var h = 365;
var xPadding = 30;
var yPadding = 20;
var padding = 10;
var xScale = d3.scaleLinear()
.range([xPadding, w - padding])
.domain([-1, 1]);
var yScale = d3.scaleLinear()
.range([h - yPadding, padding])
.domain([-1, 1]);
var svg = d3.select('body')
.append("svg")
.attr('width', canvasW)
.attr('height', canvasH);
var lasso_start = function() {
lasso.items()
.attr("r",7)
.classed("not_possible",true)
.classed("selected",false);
};
var lasso_draw = function() {
lasso.possibleItems()
.classed("not_possible",false)
.classed("possible",true);
lasso.notPossibleItems()
.classed("not_possible",true)
.classed("possible",false);
};
var lasso_end = function() {
lasso.items()
.classed("not_possible",false)
.classed("possible",false);
lasso.selectedItems()
.classed("selected",true)
.attr("r",7);
lasso.notSelectedItems()
.attr("r",3.5);
};
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 7)
.attr("cx", function(d) { return xScale(d[1]); })
.attr("cy", function(d) { return yScale(d[2]); })
.attr("fill", function(d) {
var result = null;
if (data.indexOf(d) >= 0) {
result = colours(d);
} else {
result = "white";
}
return result;
});
var legend = svg.selectAll(".legend")
.data(colours.domain())
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 29 + ")"; });
legend.append("rect")
.attr("x", canvasW - 184)
.attr("y", 11)
.attr("width", 18)
.attr("height", 18)
.style("fill", colours);
legend.append("text")
.attr("x", canvasW - 194)
.attr("y", 20)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d[0];})
var lasso = d3.lasso()
.closePathDistance(75)
.closePathSelect(true)
.area(svg)
.items("circle")
.on("start",lasso_start)
.on("draw",lasso_draw)
.on("end",lasso_end);
svg.call(lasso);
CSS
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url("https://fonts.googleapis.com/css?family=Lato:300");
text {
font-family: "Open Sans Condensed";
}
.axis path {
stroke: black;
}
.tick line {
visibility: hidden;
}
.border {
margin-top: 9px;
margin-left: 29px;
border: .5px solid black;
width: 325px;
height: 335px;
position: absolute;
}
.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;
}
</style>
我以前从未使用过 d3.lasso
,但看着 this bl.ock using d3 v4,看起来您的代码缺少一些小东西:
要传递给 d3 lasso
的区域现在使用 targetArea
完成
var lasso = d3.lasso()
.targetArea(svg)
传递给 d3 lasso
的项目必须是 d3 selection
而不是字符串
var circles = svg.selectAll("circle")...
var lasso = d3.lasso()
.items(circles)
当然,在脚本标签中使用实际缩小的套索代码,这里有一个片段:
此外,我在 selected
圆圈中添加了一些 CSS 只是为了与其他圆圈进行区分:
.selected {
fill: steelblue;
}
希望对您有所帮助。
我以为我遇到了与这个 SO 用户类似的问题
我的代码与 lasso git 集线器上的示例代码大致相同(我已经对我的设置进行了必要的更改),所以理论上我不应该有任何问题,正确的?
我只想在附加我自己的样式并返回任何数据之前让套索本身正常工作。
<script>
var data = [["Arsenal",-0.0032967741593940836, 0.30399753945657115],["Chelsea", 0.2752159801936051, -0.0389675484210763], ["Liverpool",-0.005096951348655329, 0.026678627680541075], ["Manchester City",-0.004715381791104284, -0.12338379196523988], ["Manchester United",0.06877966010653305, -0.0850615090351779], ["Tottenham",-0.3379518099485709, -0.09933664174939877]];
const colours = d3.scaleOrdinal()
.domain(data)
.range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);
var canvasW = 675;
var canvasH = 400;
var w = 365;
var h = 365;
var xPadding = 30;
var yPadding = 20;
var padding = 10;
var xScale = d3.scaleLinear()
.range([xPadding, w - padding])
.domain([-1, 1]);
var yScale = d3.scaleLinear()
.range([h - yPadding, padding])
.domain([-1, 1]);
var svg = d3.select('body')
.append("svg")
.attr('width', canvasW)
.attr('height', canvasH);
var lasso_start = function() {
lasso.items()
.attr("r",7)
.classed("not_possible",true)
.classed("selected",false);
};
var lasso_draw = function() {
lasso.possibleItems()
.classed("not_possible",false)
.classed("possible",true);
lasso.notPossibleItems()
.classed("not_possible",true)
.classed("possible",false);
};
var lasso_end = function() {
lasso.items()
.classed("not_possible",false)
.classed("possible",false);
lasso.selectedItems()
.classed("selected",true)
.attr("r",7);
lasso.notSelectedItems()
.attr("r",3.5);
};
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 7)
.attr("cx", function(d) { return xScale(d[1]); })
.attr("cy", function(d) { return yScale(d[2]); })
.attr("fill", function(d) {
var result = null;
if (data.indexOf(d) >= 0) {
result = colours(d);
} else {
result = "white";
}
return result;
});
var legend = svg.selectAll(".legend")
.data(colours.domain())
.enter()
.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 29 + ")"; });
legend.append("rect")
.attr("x", canvasW - 184)
.attr("y", 11)
.attr("width", 18)
.attr("height", 18)
.style("fill", colours);
legend.append("text")
.attr("x", canvasW - 194)
.attr("y", 20)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d[0];})
var lasso = d3.lasso()
.closePathDistance(75)
.closePathSelect(true)
.area(svg)
.items("circle")
.on("start",lasso_start)
.on("draw",lasso_draw)
.on("end",lasso_end);
svg.call(lasso);
CSS
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url("https://fonts.googleapis.com/css?family=Lato:300");
text {
font-family: "Open Sans Condensed";
}
.axis path {
stroke: black;
}
.tick line {
visibility: hidden;
}
.border {
margin-top: 9px;
margin-left: 29px;
border: .5px solid black;
width: 325px;
height: 335px;
position: absolute;
}
.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;
}
</style>
我以前从未使用过 d3.lasso
,但看着 this bl.ock using d3 v4,看起来您的代码缺少一些小东西:
要传递给
完成d3 lasso
的区域现在使用targetArea
var lasso = d3.lasso() .targetArea(svg)
传递给
d3 lasso
的项目必须是d3 selection
而不是字符串var circles = svg.selectAll("circle")... var lasso = d3.lasso() .items(circles)
当然,在脚本标签中使用实际缩小的套索代码,这里有一个片段:
此外,我在 selected
圆圈中添加了一些 CSS 只是为了与其他圆圈进行区分:
.selected {
fill: steelblue;
}
希望对您有所帮助。