score:3

Accepted answer

If you look at the line the error is occurring at when importing d3plus, you'll see this;

 d3.scale.ordinal()

That's d3 version 3 syntax, while it looks like you are using d3 version 4.

It looks like you want this library for version 4 (and it's specific to text-wrapping).

And here's an example merging the new API with your code snippet:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3plus.org/js/d3plus-text.v0.9.full.min.js"></script>
</head>

<body>
  <script>
    var dataPoints = [
      ["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]
    ];

    teamData = [
      ["Arsenal", "@arsenal", "world", "cup", "arsenal", "💭", "@sahil_adhikaari", "win", "@hectorbellerin", "man", "season"],
      ["Chelsea", "f", "g", "h", "i", "j"],
      ["Liverpool", "l", "m", "m", "o", "p"],
      ["Manchester City", "q", "r", "s", "t", "u"],
      ["Manchester United", "v", "w", "x", "y", "z"],
      ["Tottenham", "1", "2", "3 ", "4", "5"]
    ];

    const colours = d3.scaleOrdinal()
      .domain(dataPoints)
      .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);

    var canvasW = 700;
    var canvasH = 600;
    var w = 365;
    var h = 365;
    var xPadding = 30;
    var yPadding = 20;
    var padding = 10;
    var border = 0.5;
    var bordercolor = 'black';

    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 circles = svg.selectAll("circle")
      .data(dataPoints)
      .enter()
      .append("circle")
      .attr("r", 7)
      .attr("cx", function(d) {
        return xScale(d[1]);
      })
      .attr("cy", function(d) {
        return yScale(d[2]);
      })
      .on('click', function(d, i) {
        console.log("click", d[0]);
      })
      .attr("fill", function(d) {
        var result = null;

        if (dataPoints.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 borderPath = svg.append("rect")
      .attr("x", 5)
      .attr("y", 5)
      .attr("height", h)
      .attr("width", w)
      .style("stroke", bordercolor)
      .style("fill", "none")
      .style("stroke-width", border);

    var textBox = svg.append("g")
      .attr("transform", "translate(5,385)");

    textBox.append("rect")
      .attr("id", "target")
      .attr("height", 150)
      .attr("width", 529)
      .style("stroke", bordercolor)
      .style("fill", "none")
      .style("stroke-width", border);

    circles.on("click", filter);

    filter(["Arsenal"]);

    function filter(d) {
      d3.select("body").selectAll(null);

      var filterss = teamData.filter(e =>e[0] === d[0])[0];
      var team = filterss.slice(0, 1);
      filterss = filterss.slice(1, filterss.length);
      team = team + ": "
      filterss = filterss.join(", ")
      console.log(team + filterss);

      new d3plus.TextBox()
        .select(textBox.node())
        .data([team + filterss])
        .text(function(d) {
          return d;
        })
        .width(textBox.select('rect').attr("width"))
        .fontSize(20)
        .render();
    }
  </script>
</body>

</html>


Related Query