javascript - 套索和D3.js

我以为我有一个与此SO用户here类似的问题，但是在将最小化的套索库替换为实际的套索代码后，我仍然没有得到有效的输出。

我的代码与套索的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>

最佳答案

我以前从未使用过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)

当然，在脚本标签中使用实际的最小化套索代码，下面是一个代码段：

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

另外，我在selected圈子中添加了一些CSS，以区别于其他CSS：

.selected {
   fill: steelblue;
}

希望这可以帮助。