twitter / d3kit Goto Github PK

I was working with a skeleton that had autoResize set to both, resizeToFitContainer to full, and no default height or width set. I noticed that the yAxis was slightly off alignment when it first loaded, and grew continuously every time the browser changed size. I logged the value of getInnerHeight() and saw that it was growing by exactly 8px each time.

It seems that this occurs whenever the line-height CSS property for the chart div isn't equal to 0. In my case, my CSS file had html { line-height: 1.5}; so it applied to the entire page, and happened to correspond to 8px.

The bug comes from a bit of a circular logic that occurs between the size of the SVG element and the div that contains it. Basically, it happens like this:

• The SVG height is set on line 504 from the _totalHeight variable using _svg.attr('height', _totalHeight);. Let's say its 150px.
• The SVG is inserted into the chart div at line 368, but because of the line-height, it's 8 pixels taller at 158px.
• When the height() function is called on line 494, the _totalHeight variable is set to the height of the chart div, 158px, which also effects the _innerHeight property on line 503
• The next time everything updates, _svg.attr('height', _totalHeight); is called once again, and the SVG is now set to 158px, which causes the div to be set to 166px.
• The process then repeats itself the next time the browser resizes.

The CSS solution is pretty simple once you know what the problem is, but finding out where the bugs originates is tricky. I'm not familiar enough with your library to do a pull request, but I hope this helps!

Here is an example project using d3kit with TypeScript. (NOTE: You can't actually npm install this project until this PR gets merged over at DefinitelyTyped.)

If you clone, run npm install && npm run build then try to open the index.html file in a browser, the chart is not displayed and the console gives the error:

Uncaught TypeError: this.constructor.getCustomEventNames is not a function(…)

I tried changing the main property in node_modules/d3kit/package.json to point to d3kit.min.js, d3kit.js, and d3kit-es.js and rebuilding, but I got the same error each time. I was able to get my sample project to work by editing this line in d3kit.js to:

var customEvents = [];

Obviously this is a clunky workaround. Here are my thoughts as to the source of the problem:

• There's a problem with some part of my build process (tsc && rollup && uglify)
• A bug was introduced or not completely removed in v3.1.2

It seems pretty clearly related to this line from the source. Unless you can easily spot what the issue is, I will try to play around with it over the next few days and see if I can't submit a patch.

Hi, enjoying D3Kit library and started to create reusable chart components that work fine for pie and line charts (line chart needs adjustment if line is animated through data points progressively since it doesn't fill entire line when chart is resized - that's another issue).

But for advanced bar charts I cannot achieve responsiveness - axes resize as they should but the data e.g. bars don't adjust when a browser is resized (e.g. x(d.value) should be different for resized bars but the code part to draw bars doesn't get called on resize).

Attaching stripped sample code (BCGH.html), JSON data file and a page (test-BCGH.html) without using D3Kit for horizontal grouped bar charts (the same issue is with usual vertical and stacked bar charts that also don't reposition as they should - simple bar charts resize fine with D3Kit). Note that direct comparison of these pages is not fair since in the test-BCGH SVG itself resizes to the container.

I have tried to change the onresize function in various ways:

• getting ID of the current chart (this.container._groups[0][0].id)) and do some cleaning but of course the chart content cannot be deleted (e.g. clearing the entire DIV as here:
  http://bl.ocks.org/ChandrakantThakkarDigiCorp/f0e2cf699d9b96aa09e283550bfef1e4 );
• removing SVG width and height attributes to have it autoresize but then D3Kit must be handled well (e.g. the plate dimensions, changing to be done with having fit options set);
• involving timer function to somehow wait for onresize event to complete (and then call the visualize function again).

Any help much appreciated.

D3Kit-hori-grouped-bar-charts.zip

have a look at the resize and auto resize options and see if the api can be simplified a little.

I'm working with a chart using autoResize to true and autoResizeToAspectRatio set to 1.5. I noticed that if I shrunk the browser window, the chart resized properly, but if I then made it large again, the chart stayed small.

The issue seems to come from resizeToAspectRatio function. For example, if you start with a large div and go to a small one, the div proportions go from:

• _totalWidth = 700
• _totalHeight = 467
• estimatedHeight = 467

To:

• _totalWidth = 400
• _totalHeight = 467
• estimatedHeight = 267

The if/else statement on line 663 then correctly says "if the estimated height is not larger than the height, change the height to the estimated height."

In the opposite direction, however, it does this:

• _totalWidth = 400
• _totalHeight = 267
• estimatedHeight = 267

To:

• _totalWidth = 700
• _totalHeight = 267
• estimatedHeight = 467

The same if/else statement then effectively says "if the estimated height is greater than the total height, adjust the width." But the width is already adjusted, so nothing updates.

I patched this by changing:

  if (estimatedH > h) {
    width(Math.floor(h * ratio), doNotDispatch);
  } else {
    height(estimatedH, doNotDispatch);
  }

To:

  if (estimatedH > h) {
    height(estimatedH, doNotDispatch);
    width(Math.floor(estimatedH * ratio), doNotDispatch);
  } else {
    height(estimatedH, doNotDispatch);
  }

But, I'm not sure if that works in all cases, so perhaps there's a cleaner solution.

I've been working on creating a new TypeScript .d.ts definition file for d3kit v3.1.1. I'm trying to just create a basic example of using d3kit in a TypeScript project. I followed the following process:

$ mkdir d3kit_test
$ cd d3kit_test
$ npm init
$ npm i --save d3 @types/d3 d3kit
$ typings install d3kit=github:morphatic/DefinitelyTyped/d3kit/index.d.ts#6cf5f4af25f4654f74e000367200823376e3233f --global --save

Then in index.ts I've got something like the following (based on the example code in your README):

import { SvgChart, helper } from "d3kit";

class SimpleBarChart extends SvgChart {
    static getDefaultOptions() {
        return helper.deepExtend(
            super.getDefaultOptions(),
            {
                margin: { top: 20, right: 20, bottom: 20, left: 20 },
                initialWidth: 800,
                initialHeight: 600
            }
        );
    }
    // ... snip: the rest of the example
}

My code editor (Sublime) complains "Cannot find module 'd3kit'" and this is backed up by the output when I try to compile ($ tsc index.ts) from the command line. The type definitions seem to be working fine as I can get code completion in my editor for d3kit classes and functions.

I've tried this on 2 computers with the same result. One using node 7.0.0, the other 6.7.0. Both have TypeScript v2 installed. I've verified that d3kit v3.1.1 was downloaded and is installed in node_modules in the place you'd expect it to be, so I'm not sure why the module loader would have trouble finding it. I've tried it both with and without importing the type definitions. I've also tried adding /// <reference path="typings/index.d.ts" /> to the top of the file. No joy.

I confess the whole UMD paradigm has always flummoxed me so I can't tell if there is an issue with the way that the package is exported, but I'm frustrated that I can't seem to get a simple example to work.

Any ideas? I really like this package.

it appear that the wiki is not working. @caniszczyk did you by chance disable it?

• chartlet doc
• chartlet demo
• skeleton doc

Hi folks,

FYI, I just submitted a PR to the DefinitelyTyped repo adding a Typescript .d.ts type definition file for d3Kit. Assuming it's adopted without problems, it will (eventually) be available for people wishing to use d3Kit in Typescript projects at: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/d3kit

Using the typings CLI, one should be able to install the d3kit.d.ts type definition file by typing the following into your terminal:

$ typings install dt~d3kit --save --global

Thanks for putting this library out there! Hope this is useful to someone.

Cheers,
Morgan

Lets get a public build going!

First off, great work with this! I have a question on autoresize. While it works great out of the box, there is an annoying resize on initialization. See this gif to understand what I am talking about.

Do you have any suggestions on how I can avoid this while I enable autoresize?

D3 version 4 has made changes to the way event dispatches happen. This seems to be breaking d3-kit.

Unfortunately, D3v4 is not backward compatible. Here is the change description for event dispatches:
https://github.com/d3/d3/blob/master/CHANGES.md#dispatches-d3-dispatch

When attempting to use d3kit with d3 version 4.1.1, the first error I get says that "_dispatch.resize is not a function" in the latest version of d3kit.js. I get it on line 507, but the same code appears multiple times. There are (I suspect) other changes that need to be made as well.