套索和D3.js [英] Lasso and D3.js

问题描述

我认为我对此SO用户有类似的问题此处，但是将最小化的套索库替换为实际的套索代码后，我仍然没有得到有效的输出.

I thought i had a similar issues to this SO user here, but after swapping out the minified lasso library for the actual lasso code, I'm still not getting a working output.

我的代码与套索的git hub上的示例代码大致相同(我对设置进行了必要的更改)，因此从理论上讲我应该不会有任何问题，对吗?

My code is more or less the same as the example code on lasso's git hub (I've made the required changes for my set up), so theoretically i shouldn't be having any issues, right?

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

I just want to get the lasso itself working before appending my own styles and returning any data.

<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，而是查看使用d3 v4的bl.ock ，看起来您的代码缺少一些小东西:

I never used d3.lasso before but looking at this bl.ock using d3 v4, looks like your code is missing a few minor things:

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

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

传递给d3 lasso的项目必须是d3 selection而不是字符串

Items passed to d3 lasso must be a d3 selection and not a string

var circles = svg.selectAll("circle")...

var lasso = d3.lasso()
 .items(circles) 

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

And of course, using the actual minified lasso code in a script tag, here's a snippet:

https://bl.ocks.org/shashanb266a0f7a7a2a7a7a2a7a2a7a7a7a2a0f0dc3a0f0fc7a7a7a7a7a7a0d0bd0b0e0b0e0e0e0b0e0e0f0e0e0e0e0e0e0e0e0e0e0e0美国比赛

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

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

Also, I've added some CSS to the selected circles just to differentiate when compared with others:

.selected {
   fill: steelblue;
}

希望这会有所帮助.

这篇关于套索和D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！