javascript - 套索和 D3.js

Question

我以为我和这个 SO 用户 here 有类似的问题，但是在将缩小的套索库替换为实际的套索代码后，我仍然没有得到工作输出。

我的代码或多或少与 lasso 的 git hub 上的示例代码相同(我已经对我的设置进行了所需的更改)，所以理论上我应该不会有任何问题，对吧？

我只想让套索本身正常工作，然后再附加我自己的样式并返回任何数据。

<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>

Answer 1

我以前从未使用过d3.lasso，但查看了this bl.ock using d3 v4 ，看起来您的代码缺少一些小东西:

1. 现在使用 targetArea 完成要传递给 d3 lasso 的区域

    var lasso = d3.lasso()
     .targetArea(svg)
   

2. 传递给 d3 lasso 的项目必须是 d3 选择，而不是字符串

   var circles = svg.selectAll("circle")...
   
   var lasso = d3.lasso()
    .items(circles) 
   

当然，在脚本标记中使用实际的缩小套索代码，这是一个片段:

https://bl.ocks.org/shashank2104/f878d660bd9013faa6d48236b5fe9502/67d50a5c7a21c0adfa5ed66ce3dc725f0a45c8c2

此外，我还在选定的圆圈中添加了一些 CSS，以便与其他圆圈进行比较:

.selected {
   fill: steelblue;
}

希望这有帮助。