Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apparent breaking change(s) in non-breaking release #64

Closed
polishmatt opened this issue Dec 11, 2019 · 3 comments
Closed

Apparent breaking change(s) in non-breaking release #64

polishmatt opened this issue Dec 11, 2019 · 3 comments

Comments

@polishmatt
Copy link

d3 doesn't have a clearly stated breaking change policy so I have to assume you're following semantic versioning and breaking changes in non-major releases are unexpected. I understand that some of the versions I'm mentioning are old -- I do not expect support for them but I also expect them not to have breaking changes without clearly documented major version releases.

I've run into two changes.

1

Running the following:

d3-brush.brushY()
  .extent([[0, 0], [width, height]])
  .handleSize(35);

Using the following versions:

    "d3-array": "1.2.1",
    "d3-axis": "1.0.8",
    "d3-brush": "1.0.4",
    "d3-collection": "1.0.1",
    "d3-fetch": "1.1.0",
    "d3-format": "1.2.2",
    "d3-geo": "1.10.0",
    "d3-geo-projection": "2.4.0",
    "d3-scale": "2.0.0",
    "d3-selection": "^1.3.0",
    "d3-shape": "1.2.0",
    "d3-time": "1.0.8",
    "d3-time-format": "2.1.1",
    "d3-tip": "^0.8.0-alpha.1",
    "d3-zoom": "1.7.1",

Raises:

Error: illegal type: function brush(group) {
    var overlay = group.property("__brush", initialize).selectAll(".overlay").data([type("overlay")]);

    overlay.enter().append("rect").attr("class", "overlay").attr("pointer-events", "all").attr("cursor", cursors.overlay).merge(overlay).each(function () {
      var extent = local(this).extent;
      (0, _d3Selection.select)(this).attr("x", extent[0][0]).attr("y", extent[0][1]).attr("width", extent[1][0] - extent[0][0]).attr("height", extent[1][1] - extent[0][1]);
    });

    group.selectAll(".selection").data([type("selection")]).enter().append("rect").attr("class", "selection").attr("cursor", cursors.selection).attr("fill", "#777").attr("fill-opacity", 0.3).attr("stroke", "#fff").attr("shape-rendering", "crispEdges");

    var handle = group.selectAll(".handle").data(dim.handles, function (d) {
      return d.type;
    });

    handle.exit().remove();

    handle.enter().append("rect").attr("class", function (d) {
      return "handle handle--" + d.type;
    }).attr("cursor", function (d) {
      return cursors[d.type];
    });

    group.each(redraw).attr("fill", "none").attr("pointer-events", "all").style("-webkit-tap-highlight-color", "rgba(0,0,0,0)").on("mousedown.brush touchstart.brush", started);
  }
    at dispatch (dispatch.js?f05e:5)
    at brush (brush.js?bbe9:136)
    at brushY (brush.js?bbe9:128)

This issue didn't exist with the same versions as of Dec 9th or 10th. This could have been the result of a browser change but it seems unlikely as I'm using an older version (Chrome 77.0.3865.120, macOS Version 10.14.6).

2

Running the following versions:

    "d3-array": "1.2.4",
    "d3-axis": "1.0.12",
    "d3-brush": "1.1.5",
    "d3-collection": "1.0.7",
    "d3-fetch": "1.1.2",
    "d3-format": "1.4.2",
    "d3-geo": "1.11.9",
    "d3-geo-projection": "2.7.1",
    "d3-scale": "2.2.2",
    "d3-selection": "1.4.1",
    "d3-shape": "1.3.7",
    "d3-time": "1.1.0",
    "d3-time-format": "2.2.2",
    "d3-tip": "^0.8.0-alpha.1",
    "d3-zoom": "1.8.3",

addresses the above issue without any major version changes.

It does result in a new change though. When drawing lines with the following and d3-shape.line:

d3-scale.scaleLinear()
            .domain([0, yMax])
            .range([height, 0]);

The line is drawn through the center of the svg area (at height/2) when all data points are 0. When some data is > 0 any 0 data points are drawn at the bottom of the svg. This is inconsistent with the behavior while using the previous version configuration before the brushY issue appeared, where 0 would always be drawn at the bottom.

@mbostock
Copy link
Member

d3-dispatch 1.0.6 added error checking for the type names passed to d3.dispatch. This revealed a bug in d3-brush where the brush function itself was being erroneously passed to d3.brush; this bug was fixed in d3-brush 1.1.4.

The second change you’re describing was included in d3-scale 2.2.0 (#113 #117). The behavior of a scale with a collapsed domain was previously not defined, so this change defined it as returning the midpoint of the range rather than the start.

In general, semantic versioning only means that supported behaviors continue working as defined in patch (and minor) releases. In both of these cases, the previous behaviors were neither intended or documented; they just happened to fall out of the existing implementation. I make a best effort to define what behaviors are supported in documentation (and verify said behavior in tests), but I’m not perfect, and there is undoubtedly other unsupported edge case behavior that may change over time. The only way to ensure that unsupported behaviors don’t change is to pin exact versions. If you’d like to contribute documentation to the README to better define supported behaviors, that would be welcome!

@34r7h
Copy link

34r7h commented Dec 31, 2019

I've got the same using d3-brush version 1.1.5

`client.js?06a0:77 Error: illegal type: function brush(group) {
var overlay = group
.property("__brush", initialize)
.selectAll(".overlay")
.data([type("overlay")]);

overlay.enter().append("rect")
    .attr("class", "overlay")
    .attr("pointer-events", "all")
    .attr("cursor", cursors.overlay)
  .merge(overlay)
    .each(function() {
      var extent = local(this).extent;
      Object(d3_selection__WEBPACK_IMPORTED_MODULE_3__["select"])(this)
          .attr("x", extent[0][0])
          .attr("y", extent[0][1])
          .attr("width", extent[1][0] - extent[0][0])
          .attr("height", extent[1][1] - extent[0][1]);
    });

group.selectAll(".selection")
  .data([type("selection")])
  .enter().append("rect")
    .attr("class", "selection")
    .attr("cursor", cursors.selection)
    .attr("fill", "#777")
    .attr("fill-opacity", 0.3)
    .attr("stroke", "#fff")
    .attr("shape-rendering", "crispEdges");

var handle = group.selectAll(".handle")
  .data(dim.handles, function(d) { return d.type; });

handle.exit().remove();

handle.enter().append("rect")
    .attr("class", function(d) { return "handle handle--" + d.type; })
    .attr("cursor", function(d) { return cursors[d.type]; });

group
    .each(redraw)
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .style("-webkit-tap-highlight-color", "rgba(0,0,0,0)")
    .on("mousedown.brush touchstart.brush", started);

}
at dispatch (dispatch.js?b99e:5)
at brush (brush.js?f6ce:138)
at Module.brushX (brush.js?f6ce:124)
at eval (d3_timeseries.js?fe78:50)
at eval (timeseries.vue?b547:38)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/timeseries.vue?vue&type=script&lang=js& (index.js:47)
at webpack_require (runtime.js:791)
at fn (runtime.js:151)
at eval (timeseries.vue?1a99:1)
at Module../components/timeseries.vue?vue&type=script&lang=js& (index.js:23)`

@ahwelgemoed
Copy link

I ran into a similar issue on a big project that still uses D3 V4.11.0 - .lock file got deleted and a reinstall generated this issue - Long story - I found that yarn didn't work and npm install did work -

For me the issue was with how peer dependency installs and resolve work with Yarn.
Read more here

I added this to my package.json

"resolutions": { "d3-selection": "1.1.0", "d3-dispatch": "1.0.6", "d3-brush": "1.1.4" },

And it fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

4 participants