Light

d3plus / d3plus-network Goto Github PK

View Code? Open in Web Editor NEW

3.0 5.0 0.0 2.56 MB

Javascript network visualizations built upon d3 modules.

Home Page: https://d3plus.org

License: MIT License

JavaScript 100.00%

d3plus-network's Introduction

d3plus-network

Javascript network visualizations built upon d3 modules.

Installing

If using npm, npm install d3plus-network. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus-network";

d3plus-network can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-network@1"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. 🍻

API Reference

Network
Rings
Sankey

Network <>

This is a global class, and extends all of the methods and functionality of Viz.

Network ⇐ Viz
- new Network()
- .hover([value]) ↩︎
- .links(links, [formatter]) ↩︎
- .linkSize([value]) ↩︎
- .linkSizeMin([value]) ↩︎
- .linkSizeScale([value]) ↩︎
- .nodeGroupBy([value]) ↩︎
- .nodes(nodes, [formatter]) ↩︎
- .size([value]) ↩︎
- .sizeMax([value]) ↩︎
- .sizeMin([value]) ↩︎
- .sizeScale([value]) ↩︎
- .x([value]) ↩︎
- .y([value]) ↩︎
- .linkSize([value]) ↩︎
- .linkSizeMin([value]) ↩︎
- .linkSizeScale([value]) ↩︎

# new Network()

Creates a network visualization based on a defined set of nodes and edges. Click here for help getting started using the Network class.

# Network.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.links(links, [formatter]) <>

A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of three ways:

The index of the node in the nodes array (as in this example).
The actual node Object itself.
A String value matching the id of the node.

The value passed should either be an Array of data or a String representing a filepath or URL to be loaded. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.

This is a static method of Network, and is chainable with other methods of this Class.

Param	Type	Description
links	`Array` \| `String`	= []
[formatter]	`function`

# Network.linkSize([value]) <>

Defines the thickness of the links connecting each node. The value provided can be either a pixel Number to be used for all links, or an accessor function that returns a specific data value to be used in an automatically calculated linear scale.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.linkSizeMin([value]) <>

Defines the minimum pixel stroke width used in link sizing.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.linkSizeScale([value]) <>

Sets the specific type of continuous d3-scale used when calculating the pixel size of links in the network.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.nodeGroupBy([value]) <>

If value is specified, sets the node group accessor(s) to the specified string, function, or array of values and returns the current class instance. This method overrides the default .groupBy() function from being used with the data passed to .nodes(). If value is not specified, returns the current node group accessor.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.nodes(nodes, [formatter]) <>

The list of nodes to be used for drawing the network. The value passed should either be an Array of data or a String representing a filepath or URL to be loaded.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.

This is a static method of Network, and is chainable with other methods of this Class.

Param	Type	Description
nodes	`Array` \| `String`	= []
[formatter]	`function`

# Network.size([value]) <>

If value is specified, sets the size accessor to the specified function or data key and returns the current class instance. If value is not specified, returns the current size accessor.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.sizeMax([value]) <>

Defines the maximum pixel radius used in size scaling. By default, the maximum size is determined by half the distance of the two closest nodes.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.sizeMin([value]) <>

Defines the minimum pixel radius used in size scaling.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.sizeScale([value]) <>

Sets the specific type of continuous d3-scale used when calculating the pixel size of nodes in the network.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.x([value]) <>

If value is specified, sets the x accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current x accessor. By default, the x and y positions are determined dynamically based on default force layout properties.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.y([value]) <>

If value is specified, sets the y accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current y accessor. By default, the x and y positions are determined dynamically based on default force layout properties.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.linkSize([value]) <>

Defines the thickness of the links connecting each node. The value provided can be either a pixel Number to be used for all links, or an accessor function that returns a specific data value to be used in an automatically calculated linear scale.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.linkSizeMin([value]) <>

Defines the minimum pixel stroke width used in link sizing.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.linkSizeScale([value]) <>

Sets the specific type of continuous d3-scale used when calculating the pixel size of links in the network.

This is a static method of Network, and is chainable with other methods of this Class.

Rings <>

This is a global class, and extends all of the methods and functionality of Viz.

Rings ⇐ Viz
- new Rings()
- .center(_) ↩︎
- .hover([value]) ↩︎
- .links(links, [formatter]) ↩︎
- .nodeGroupBy([value]) ↩︎
- .nodes(nodes, [formatter]) ↩︎
- .size([value]) ↩︎
- .sizeMax([value]) ↩︎
- .sizeMin([value]) ↩︎
- .sizeScale([value]) ↩︎

# new Rings()

Creates a ring visualization based on a defined set of nodes and edges. Click here for help getting started using the Rings class.

# Rings.center(_) <>

Sets the center node to be the node with the given id.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.links(links, [formatter]) <>

A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of three ways:

The index of the node in the nodes array (as in this example).
The actual node Object itself.
A String value matching the id of the node.

The value passed should either be an Array of data or a String representing a filepath or URL to be loaded. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.

This is a static method of Rings, and is chainable with other methods of this Class.

Param	Type	Description
links	`Array` \| `String`	= []
[formatter]	`function`

# Rings.nodeGroupBy([value]) <>

If value is specified, sets the node group accessor(s) to the specified string, function, or array of values and returns the current class instance. This method overrides the default .groupBy() function from being used with the data passed to .nodes(). If value is not specified, returns the current node group accessor.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.nodes(nodes, [formatter]) <>

The list of nodes to be used for drawing the rings network. The value passed should either be an Array of data or a String representing a filepath or URL to be loaded.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.

This is a static method of Rings, and is chainable with other methods of this Class.

Param	Type	Description
nodes	`Array` \| `String`	= []
[formatter]	`function`

# Rings.size([value]) <>

If value is specified, sets the size accessor to the specified function or data key and returns the current class instance. If value is not specified, returns the current size accessor.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.sizeMax([value]) <>

If value is specified, sets the size scale maximum to the specified number and returns the current class instance. If value is not specified, returns the current size scale maximum. By default, the maximum size is determined by half the distance of the two closest nodes.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.sizeMin([value]) <>

If value is specified, sets the size scale minimum to the specified number and returns the current class instance. If value is not specified, returns the current size scale minimum.

This is a static method of Rings, and is chainable with other methods of this Class.

# Rings.sizeScale([value]) <>

If value is specified, sets the size scale to the specified string and returns the current class instance. If value is not specified, returns the current size scale.

This is a static method of Rings, and is chainable with other methods of this Class.

Sankey <>

This is a global class, and extends all of the methods and functionality of Viz.

Sankey ⇐ Viz
- new Sankey()
- .hover([value]) ↩︎
- .links(links) ↩︎
- .linksSource([value]) ↩︎
- .linksTarget([value]) ↩︎
- .nodeAlign([value]) ↩︎
- .nodeId([value]) ↩︎
- .nodes(nodes) ↩︎
- .nodePadding([value]) ↩︎
- .nodeWidth([value]) ↩︎
- .value(value)

# new Sankey()

Creates a sankey visualization based on a defined set of nodes and links. Click here for help getting started using the Sankey class.

# Sankey.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.links(links) <>

A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of one way:

A String value matching the id of the node.

The value passed should be an Array of data. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.linksSource([value]) <>

The key inside of each link Object that references the source node.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.linksTarget([value]) <>

The key inside of each link Object that references the target node.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodeAlign([value]) <>

Sets the nodeAlign property of the sankey layout, which can either be "left", "right", "center", or "justify".

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodeId([value]) <>

If value is specified, sets the node id accessor(s) to the specified array of values and returns the current class instance. If value is not specified, returns the current node group accessor.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodes(nodes) <>

The list of nodes to be used for drawing the network. The value passed must be an Array of data.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodePadding([value]) <>

If value is specified, sets the padding of the node and returns the current class instance. If value is not specified, returns the current nodePadding. By default, the nodePadding size is 8.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.nodeWidth([value]) <>

If value is specified, sets the width of the node and returns the current class instance. If value is not specified, returns the current nodeWidth. By default, the nodeWidth size is 30.

This is a static method of Sankey, and is chainable with other methods of this Class.

# Sankey.value(value) <>

If value is specified, sets the width of the links and returns the current class instance. If value is not specified, returns the current value accessor.

This is a static method of Sankey.

function value(d) {
  return d.value;
}

_{Documentation generated on Wed, 25 Jan 2023 17:33:01 GMT}

d3plus-network's People

Contributors

Stargazers

Watchers

d3plus-network's Issues

add support for nodePadding to Sankey

https://github.com/d3/d3-sankey#sankey_nodePadding

An in-range update of d3-zoom is breaking the build 🚨

Version 1.1.3 of d3-zoom just got published.

Branch	Build failing 🚨
Dependency	d3-zoom
Current Version	1.1.2
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3-zoom is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v1.1.3

Update dependencies.

Commits

The new version differs by 2 commits .

bfb2961 1.1.3
831a235 Update UglifyJS.

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

live networks

edge arrows showing directionality

support variable edge width in Network and Rings

implement Sankey diagrams

using this d3 layout: https://github.com/d3/d3-sankey

An in-range update of d3plus-common is breaking the build 🚨

Version 0.6.15 of d3plus-common just got published.

Branch	Build failing 🚨
Dependency	d3plus-common
Current Version	0.6.14
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-common is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v0.6.15

updates d3-array to v1.1.1 (6f44c40)
fix(package): update i18next to version 7.1.2 (#72) (ef501ca)
chore(package): update d3plus-dev to version 0.3.1 (#71) (4ee5c5d)

Commits

The new version differs by 4 commits .

6f44c40 updates d3-array to v1.1.1
ef501ca fix(package): update i18next to version 7.1.2 (#72)
4ee5c5d chore(package): update d3plus-dev to version 0.3.1 (#71)
e93f795 compiles v0.6.14

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

An in-range update of d3-array is breaking the build 🚨

Version 1.0.3 of d3-array just got published.

Branch	Build failing 🚨
Dependency	d3-array
Current Version	1.0.2
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3-array is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Release Notes

v1.0.3

Update dependencies.

Commits

The new version differs by 6 commits .

94e197a 1.0.3
ee02e72 Update Rollup.
80ccbce Merge branch 'patch-1' of https://github.com/dyst5422/d3-array
adb0901 Fix formatting.
035c3dd Fix italics.
b4a9a9b Update README.md

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

An in-range update of d3-selection is breaking the build 🚨

Version 1.0.5 of d3-selection just got published.

Branch	Build failing 🚨
Dependency	d3-selection
Current Version	1.0.4
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3-selection is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v1.0.5

Update dependencies.

Commits

The new version differs by 3 commits .

1e33400 1.0.5
cc03254 Update UglifyJS.
a504db2 Remove outdated documentation for local_remove

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

set ariaLabel on shapes

dependent on this issue: d3plus/d3plus-shape#78

ariaLabel should be based on the following formula: ${drawLabel}, ${nodeSize}.

allow Sankey to include non-linked nodes

An in-range update of d3-brush is breaking the build 🚨

Version 1.0.4 of d3-brush just got published.

Branch	Build failing 🚨
Dependency	d3-brush
Current Version	1.0.3
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3-brush is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v1.0.4

Update dependencies.

Commits

The new version differs by 2 commits .

0544e13 1.0.4
e1f88d2 Update Rollup, UglifyJS.

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

broken links go to 404

a lot of the links on this github repo readmes end to 404
e.g.
https://d3plus.org/examples/d3plus-network/force-network/

improve Sankey algorithm

In this moment, Sankey diagram works fine, but it's very restrictive with the data format. For example, you need passing a variable with nodes and links, you cannot passing a PATH URL for links / nodes.

I propose improve how the Sankey diagram works, simplifying at least the data passed into links attribute.

Displaying images on nodes

I have a pretty extreme edge use case, where I am using the d3plus network to create a graph of the links between symbols that appear in conjunction with each other on ancient Greek coins. These symbols have SVG representations, and ideally I would like to display them in some way within the network visualization. I attempted the following in the config:

label: function (node) {
            if (node.hasOwnProperty('image')) {
                return node.label + ' <img src="' + node.image + '" style="width:16px"/>';
            } else {
                return node.label;
            }
}

Because the d3plus visualization is SVG itself, injecting a bit of HTML into label doesn't do anything, although surprisingly the tooltip will display the SVG graphic (see attached image).

Is there any solution for this? Ideally, I would like to embed the SVG graphic into the node circle, but displaying the SVG in the tooltip is acceptable enough. However, as you can see in the screenshot, the <img> tag is just displayed as text in the node. Is it possible to control the tooltip more directly, or is it inextricably bound to the label?

rings network layout

The idea here is to have a network layout centered on a single node and to show 2 levels of connections (neighbors and neighbors' neighbors). This was in the old d3plus so there should hopefully be a lot of reusable parts.

Old code: https://github.com/alexandersimoes/d3plus/blob/master/src/viz/types/rings.js

Example: https://atlas.media.mit.edu/en/visualize/rings/hs92/export/chn/all/2607/2016/

"d3plus.Network is not a constructor"

I've been trying to use d3plus 2.0 for a number of visualizations, but every time I try to use the new module/class structure, I get an error of "X" is not a constructor. The images below show the failure which is specific to the network class, but I get the same failure whenever I try any other class from the 2.0 examples page.

This is my basic script and failure:

This is my basic HTML file:

This is my package.json (showing the 2.0 version installed by npm):

Is this an error on my part (very likely), or is something else wrong?

[rendering] issue in bubbles opacity/order

Expected Behavior

Like oec in prod:

Current Behavior

Like oec in dev:

Steps to Reproduce (for bugs)

Go to france profile
Product space section
Click on Delivery Trucks bubble

Your Environment

Browser Name: chrome
Operating System and Version: mac os

An in-range update of d3-zoom is breaking the build 🚨

Version 1.4.0 of d3-zoom just got published.

Branch	Build failing 🚨
Dependency	d3-zoom
Current Version	1.3.1
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

d3-zoom is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Commits

The new version differs by 2 commits.

afb5631 1.4.0
ec4859c Update dependencies.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

Rings not work: Cannot read property 'id' of undefined

I'm not sure why I cannot visit 'https://gitter.im/d3plus/'
I'm using 'd3plus-network' in Angular5. It works just fine when I copy and paste the 'simple network 'sample code. But When I try to run 'simple rings' example code. It throws:

ERROR TypeError: Cannot read property 'id' of undefined
    at Circle.fontResize (Rings.js:438)
    at TextBox._fontResize (configPrep.js:22)
    at TextBox.js:94
    at Array.reduce (<anonymous>)
    at TextBox.render (TextBox.js:89)
    at Circle._renderLabels (Shape.js:479)
    at Circle.render (Shape.js:553)
    at Circle.render (Circle.js:48)
    at Rings.js:452

My code:

import { Component, OnInit } from '@angular/core';
import * as d3plusNet from 'd3plus-network';

export class test implements OnInit {
    constructor() { }
    ngOnInit() {
    }
    links = [
        { "source": "alpha", "target": "beta" },
        { "source": "alpha", "target": "gamma" },
        { "source": "beta", "target": "delta" },
        { "source": "beta", "target": "epsilon" },
        { "source": "zeta", "target": "gamma" },
        { "source": "theta", "target": "gamma" },
        { "source": "eta", "target": "gamma" }
    ];
    drawD3() {
        new d3plusNet.Rings()
            .links(this.links)
            .label(d => d.id)
            .center("alpha")
            .render();
    }
}

I debugged Rings.js. It gets 'id' from d.data.id. I find there is value of d.id

Error on 1:1 network

I am working on implementing the Network library and am getting a Uncaught TypeError: e is null error when there is a 1:1 network, as in there are only two nodes with only one link in between. I find that 1:n networks render fine. You should be able to replicate this with your own example by reducing the nodes object to 2 items and reducing the links to only one object with a {source : 0, target : 1}.

create a Chord diagram visualization type

An in-range update of d3plus-dev is breaking the build 🚨

Version 0.4.11 of d3plus-dev just got published.

Branch	Build failing 🚨
Dependency	d3plus-dev
Current Version	0.4.10
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-dev is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v0.4.11

updates documentation (1e49da9)
fixes nested npm script output in release script (fc64fcc)
fixes examples cd script (0bfa212)
updates rollup bundle for zora tests (5335d22)
updates documentation (88319b6)
updates rollup moduleId (aaab4a1)
updates documentation (b5063c4)
updates documentation (0a937b3)
updates documentation (459a36c)
updates dev script styles (0d0367a)
updates package-lock.json (68601bd)
Merge branch 'master' of https://github.com/d3plus/d3plus-dev (8b4bc3b)
updates package-lock.json (e3b57e2)
fix(package): update rollup to version 0.45.2 (#38) (9e23752)
Merge branch 'master' of https://github.com/d3plus/d3plus-dev (a274a31)
fix(package): update chalk to version 2.0.1 (#37) (774a038)
adds time front matter to examples (281f8cb)
implements global website docs generation (60c5e5c)
updates documentation (d3e42d3)
updates documentation (24cabbc)
updates documentation (3f86d9f)
updates documentation (1f83564)
updates documentation (f7c009c)
updates documentation (bf5feb6)
updates documentation (cb4a521)
updates documentation (18e9dee)
updates documentation (7a5cc98)
removes scrolling from example embeds (fb0f73e)
rebuilds package-lock.json (9a77d44)
updates dependencies (7f79ca1)
adds package-lock.json (c3816b1)
fix(package): update rollup-watch to version 4.0.0 (#34) (86ae9cb)
fix(package): update rollup to version 0.42.0 (#33) (2f580bf)
fix(package): update i18next-parser to version 0.12.0 (#32) (a555c56)

Commits

The new version differs by 35 commits.

1e49da9 updates documentation
fc64fcc fixes nested npm script output in release script
0bfa212 fixes examples cd script
5335d22 updates rollup bundle for zora tests
88319b6 updates documentation
aaab4a1 updates rollup moduleId
b5063c4 updates documentation
0a937b3 updates documentation
459a36c updates documentation
0d0367a updates dev script styles
68601bd updates package-lock.json
8b4bc3b Merge branch 'master' of https://github.com/d3plus/d3plus-dev
e3b57e2 updates package-lock.json
9e23752 fix(package): update rollup to version 0.45.2 (#38)
a274a31 Merge branch 'master' of https://github.com/d3plus/d3plus-dev

There are 35 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

edge labels

1.0 example: http://d3plus.org/examples/advanced/10503617/

Might need to add some logic in d3plus-shape for this one

An in-range update of d3-force is breaking the build 🚨

Version 1.0.5 of d3-force just got published.

Branch	Build failing 🚨
Dependency	d3-force
Current Version	1.0.4
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3-force is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Release Notes

v1.0.5

Update dependencies.

Commits

The new version differs by 3 commits .

9968e37 1.0.5
16b5e37 Update Rollup.
13af598 Link to examples.

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

provide edge information in accessor functions

ever-shrinking Rings

{
  data: `/olap-proxy/data.jsonrecords?cube=trade_i_baci_a_92&drilldowns=HS4&measures=Trade+Value&parents=true&sparse=false&Year=2018`,
  dataFormat: resp => {
    const {data} = resp;    
      data.forEach(d => {
        d["id"] = d["HS4 ID"].toString()
      });
    return data;
  },
  type: "Rings",
  center: id,
  label: "",
  links: "/network/network_hs4.json",
  linksFormat: resp => resp.edges,
  total: false
}

allow network labels to overlap Circle bounds when zooming

An in-range update of d3-scale is breaking the build 🚨

Version 1.0.5 of d3-scale just got published.

Branch	Build failing 🚨
Dependency	d3-scale
Current Version	1.0.4
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3-scale is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Status Details

❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v1.0.5

Update dependencies.

Commits

The new version differs by 2 commits .

4a35a24 1.0.5
b010c3f Update Rollup, UglifyJS.

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot 🌴

unable to load nodes/links from URL and file paths

I took HS92 data (exports, nodes and links) from the OEC to show the product space.

This is my HTML file:

<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="https://d3plus.org/js/d3plus-network.v0.1.full.min.js"></script>

  <style>

    body {
      margin: 0;
      overflow: hidden;
    }

  </style>

</head>

<body></body>

<script>

  new d3plus.Network()
            .data("chl_chn_2010_hs92_4.json")
            .links("edges_hs92_4.json")
            .nodes("nodes_hs92_4.json")
            .render();

</script>

</html>

Chrome inspector shows this error:

Uncaught TypeError: this._nodes.reduce is not a function
    at e [as _draw] (d3plus-network.v0.1.full.min.js:7)
    at tv._call (d3plus-network.v0.1.full.min.js:7)
    at av (d3plus-network.v0.1.full.min.js:7)
    at d3plus-network.v0.1.full.min.js:7
    at d3plus-network.v0.1.full.min.js:7
    at Object.<anonymous> (d3plus-network.v0.1.full.min.js:7)
    at ta.call (d3plus-network.v0.1.full.min.js:7)
    at XMLHttpRequest.f (d3plus-network.v0.1.full.min.js:7)```

automatic force directed layout

Expected Behavior

Be able to provide a list of nodes & edges with a link strength value to dynamically render force-directed layouts for networks

Current Behavior

Need to provide x/y positions for nodes

Steps to Reproduce

Along the lines of https://bl.ocks.org/mbostock/4062045

Network is not displayed if string id is used in "source" and "target" keys in links

Expected Behavior

Network is displayed if the source and target keys in each link map to a String value matching the id of the node.

var nodes = [
  {id: "alpha", x: 1, y: 1},
  {id: "beta", x: 6, y: 1},
  {id: "gamma", x: 4, y: 4}
];

var links = [
  {source: "alpha", target: "beta"},
  {source: "alpha", target: "gamma"}
];

new d3plus.Network()
  .links(links)
  .nodes(nodes)
  .render();

Current Behavior

Network is not displayed, exception in console.

d3plus-network.v0.5.full.min.js:31 Uncaught TypeError: Cannot read property 'id' of undefined
    at d3plus-network.v0.5.full.min.js:31
    at Array.reduce (<anonymous>)
    at t [as _draw] (d3plus-network.v0.5.full.min.js:31)
    at hg._call (d3plus-network.v0.5.full.min.js:31)
    at pg (d3plus-network.v0.5.full.min.js:7)
    at hg.awaitAll (d3plus-network.v0.5.full.min.js:7)
    at t [as render] (d3plus-network.v0.5.full.min.js:31)
    at window.onload ((index):44)

Steps to Reproduce

Create a JSFiddle out of this example.
Replace indexes of nodes in links with String values of the id key in nodes.
Example: https://jsfiddle.net/ucdx801f/

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.