Lasso和D3.js

Question

我认为我有一个类似的问题，所以用户这里，但在把缩小的lasso库的实际lasso代码，我仍然没有得到一个工作输出。

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

Answer 1

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

1. 要传递给d3 lasso的区域现在使用targetArea完成 var lasso = d3.lasso() .targetArea(svg)
2. 传递给d3 lasso的项必须是d3 selection，而不是字符串 变量圆=svg.selectAll(“圆”)var lasso = d3.lasso() .items(圆)

当然，在脚本标记中使用实际缩小的lasso代码，下面是一个片段：

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

此外，我还向selected圈中添加了一些CSS，以区别于其他循环：

.selected {
   fill: steelblue;
}

希望这能有所帮助。