d3.js

Wrapping Text in D3

by

You can modify Mike Bostock’s “Wrapping Long Labels” example to add <tspan> elements to your <text> nodes. There are two major changes required to add wrapped text to your nodes. I didn’t delve into having the text update its position during transitions, but it shouldn’t be too hard to add. The first is to add … Read more

Loading D3.js data from a simple JSON string

by

for remote data.json replace : d3.tsv(“data.tsv”, function(error, data) {…} with : d3.json(“data.json”, function(error, data) { console.log(data); // this is your data }); for local data: var myData = { {date:’2013-05-01′, frequency:99}, {date:’2013-05-02′, frequency:24} }; function draw(data) { console.log(data); // this is your data } draw(myData);

Creating a table linked to a csv file

by

If you’re asking about creating an HTML table from CSV data, this is what you want: d3.csv(“data.csv”, function(data) { // the columns you’d like to display var columns = [“name”, “age”]; var table = d3.select(“#container”).append(“table”), thead = table.append(“thead”), tbody = table.append(“tbody”); // append the header row thead.append(“tr”) .selectAll(“th”) .data(columns) .enter() .append(“th”) .text(function(column) { return column; … Read more

Where is d3.svg.diagonal()?

by

D3 version 4.9.0 introduced link shapes, which have the same functionality of the old d3.svg.diagonal in D3 v3. According to the API: The link shape generates a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical, horizontal or radial. … Read more

How are input parameters filled in javascript method chains?

by

Two different topics, so I’ll explain them separately: Using functions as method parameters First, a correction: The examples you are giving are not examples where “one method returns to another method that has a named input parameter”. They are examples where a function is given as the input parameter to another method. To clarify, I’ll … Read more

Creating and appending detached elements with d3.create

by

Just namespace it: const detachedG = d3.create(‘svg:g’); Here is the code with that change: <!doctype html> <html lang=”en”> <head><script src=”https://d3js.org/d3.v5.min.js”></script></head> <body> <svg></svg> <script> const svg = d3.select(‘svg’); const g = svg.append(‘g’); const detachedG = d3.create(‘svg:g’); detachedG.selectAll(‘g’) .data([5,10,20,40]) .enter() .append(‘rect’) .attr(‘fill’, ‘green’) .attr(‘x’, d => d) .attr(‘y’, d => d) .attr(‘height’, d => d) .attr(‘width’, d … Read more

D3 Differentiate between click and drag for an element which has a drag behavior

by

The key bit that’s missing is the check whether the default behaviour of an event has been prevented. That is, there’s a matching sibling to d3.event.preventDefault() — d3.event.defaultPrevented. You need to check this in your click handler to see whether any dragging action is going on. See also the answer to this question.