I have created d3 PCP chart and Here is my code:
var m = [60, 10, 10, 60],
w = 1000 - m[1] - m[3],
h = 270 - m[0] - m[2];
var x=d3.scaleOrdinal()
.range([0, w]),
y = {},
dragging = {};
var line = d3.line(),
background,
foreground;
var svg = d3.select("#test").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
//let dimensions
// Extract the list of dimensions and create a scale for each.
x.domain(this.dimensions = d3.keys(data[0]).filter(function(d) {
if (d === "name") return false;
if (d === "Plant" || d === "Chemical" || d === "Pathway" || d === "Gene" || d === "Disease") {
y[d] = d3.scaleOrdinal()
.domain(data.map(function(p) {
return p[d];
}))
.range([h, 0]);
} else {
y[d] = d3.scaleLinear().domain([0, d3.max(data.map(function(p) { return p[d]; }))]).range([h, 0]);
}
return true;
}));
//alert(this.dimensions)
// Add grey background lines for context.
background = svg.append("svg:g")
.attr("class", "background")
.selectAll("path")
.data(data)
.enter().append("svg:path")
.style('fill', 'none')
.attr("d", path.bind(this));
// Add blue foreground lines for focus.
foreground = svg.append("svg:g")
.attr("class", "foreground")
.selectAll("path")
.data(data)
.enter().append("svg:path")
.style('fill', 'none')
.style('stroke', 'steelblue')
.attr("d", path.bind(this));
// Add a group element for each dimension.
let g = svg.selectAll(".dimension")
.data(this.dimensions)
.enter().append("svg:g")
.attr("class", "dimension")
.attr("transform", function(d) {
return "translate(" + x(d) + ")";
})
// Add an axis and title.
g.append("svg:g")
.attr("class", "axis")
.each(function(d) {
d3.select(this).call(d3.axisLeft(y[d]));
})
.append("svg:text")
.attr("text-anchor", "middle")
.attr("y", -50)
.attr("x",-10)
.style("fill", "black")
.text(function(d) {return d });
var firstAxis = d3.selectAll('g.dimension g.axis');
firstAxis
.append("svg:image")
.attr('x',-20)
.attr('y',-60)
.attr('width', 40)
.attr('height', 60)
.attr("xlink:href", function(s) {
return "images/" + s+'.png';
});
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(this.dimensions.map(function(p) {
return [position(p), y[p](d[p])];
}));
}
I have a simple input from on my webpage which displaying some input drop down and based on selected value we are passing each time our new data set to script.Every time a user changes a value on the form a new dataset is sent to my script. I'm struggling to figure out how to update (refresh) the chart with new dataset I have tried to using exit and remove function but not got much success.
svg.exit().remove();
The exit method:
Returns the exit selection: existing DOM elements in the selection for
which no new datum was found. (The exit selection is empty for
selections not returned by selection.data.) (API documentation).
While you have specified data for the selections g, foreground, and background, you have not specified any data for the selection svg, so the exit selection will be empty. Consequently, .remove() can't remove anything.
To use an exit selection, note that the exit selection doesn't remove elements in a selection. It is a selection of a subset of elements in a selection that no longer have corresponding bound data.
If a selection holds 10 DOM elements, and the selection's data array is set to an array with 9 elements, the exit selection will contain one element: the excess element.
We can remove this subset with .exit().remove(). The exit is which elements we no longer need, and remove() gets rid of them. Exit doesn't remove elements because we may want to still do something with them, such as transition them, or hide them, etc.
As noted in the quote above, to populate an exit selection you must use selection.data():
var selection = svg.selectAll("path")
.data(data);
Now we can access the enter selection, the exit selection, and the update selection.
Unless specifying a key, only one of the enter or exit selections can contain elements: if we need more elements we don't need to exit any, if we have excess elements, we don't need any new ones.
To remove excess elements, we can now use:
var selection = svg.selectAll("path")
.data(data);
selection.exit().remove();
Given you are specifying data for other selections such as foreground, background, and g, these are the selections you should be using .exit() on, as part of a complete enter/update/exit cycle. Keep in mind, in d3v4 you need to merge the update and enter selections in order to perform operations on pre-existing and new elements in the selection.
However, if you simply want to get rid of the svg and start fresh (which is what it looks like you want to do - as you are trying to remove the svg) you can simply remove the svg:
d3.select("#test")
.select("svg")
.remove();
However, this won't allow you transition nicely between charts or utilize the enter/update/exit cycle.
Why note use svg.remove()? Because the selection svg holds a g element:
var svg = d3.select("#test") // returns a selection with #test
.append("svg:svg") // returns a selection with the new svg
.attr(...) // returns the selection with the newly created svg again
.append("svg:g") // returns a selection with the new g
.attr(...); // returns the selection with the newly created g again
svg is consequently a selection of a g, and removing it won't remove the svg element. In fact running the above code block after svg.remove() will add a new svg element to the DOM while not removing the old one.
Related
I have a map already drawed. I would like to add a legend using d3.js. For example when filering by length, the map should show differents colors. Since a week, I couldn't achieve this task. My map color seem to be good but the legend does not match.
Could anybody help me with my draw link function ?
https://jsfiddle.net/aba2s/xbn9euh0/12/)
I think it's the error is about the legend function.
Here is the function that change my map color Roads.eachLayer(function (layer) {layer.setStyle({fillColor: colorscale(layer.feature.properties.length)})});
function drawLinkLegend(dataset, colorscale, min, max) {
// Show label
linkLabel.style.display = 'block'
var legendWidth = 100
legendMargin = 10
legendLength = document.getElementById('legend-links-container').offsetHeight - 2*legendMargin
legendIntervals = Object.keys(colorscale).length
legendScale = legendLength/legendIntervals
// Add legend
var legendSvg = d3.select('#legend-links-svg')
.append('g')
.attr("id", "linkLegendSvg");
var bars = legendSvg.selectAll(".bars")
//.data(d3.range(legendIntervals), function(d) { return d})
.data(dataset)
.enter().append("rect")
.attr("class", "bars")
.attr("x", 0)
.attr("y", function(d, i) { return legendMargin + legendScale * (legendIntervals - i-1); })
.attr("height", legendScale)
.attr("width", legendWidth-50)
.style("fill", function(d) { return colorscale(d) })
// create a scale and axis for the legend
var legendAxis = d3.scaleLinear()
.domain([min, max])
.range([legendLength, 0]);
legendSvg.append("g")
.attr("class", "legend axis")
.attr("transform", "translate(" + (legendWidth - 50) + ", " + legendMargin + ")")
.call(d3.axisRight().scale(legendAxis).ticks(10))
}
D3 expects your data array to represent the elements you are creating. It appears you are passing an array of all your features: but you want your scale to represent intervals. It looks like you have attempted this approach, but you haven't quite got it.
We want to access the minimum and maximum values that will be provided to the scale. To do so we can use scale.domain() which returns an array containing the extent of the domain, the min and max values.
We can then create a dataset that contains values between (and including) these two endpoints.
Lastly, we can calculate their required height based on how high the visual scale is supposed to be by dividing the height of the visual scale by the number of values/intervals.
Then we can supply this information to the enter/update/exit cycle. The enter/update/exit cycle expects one item in the data array for every element in the selection - hence why need to create a new dataset.
Something like the following shold work:
var dif = colorscale.domain()[1] - colorscale.domain()[0];
var intervals = d3.range(20).map(function(d,i) {
return dif * i / 20 + colorscale.domain()[0]
})
intervals.push(colorscale.domain()[1]);
var intervalHeight = legendLength / intervals.length;
var bars = legendSvg.selectAll(".bars")
.data(intervals)
.enter().append("rect")
.attr("class", "bars")
.attr("x", 0)
.attr("y", function(d, i) { return Math.round((intervals.length - 1 - i) * intervalHeight) + legendMargin; })
.attr("height", intervalHeight)
.attr("width", legendWidth-50)
.style("fill", function(d, i) { return colorscale(d) })
In troubleshooting your existing code, you can see you have too many elements in the DOM when representing the scale. Also, Object.keys(colorscale).length won't produce information useful for generating intervals - the keys of the scale are not dependent on the data.
eg
I'm working with a D3 map projection similar to Mike Bostock's Choropleth seen here.
The issue I'm having is that I've added a transition; and when I transition the projection, the map key (seen in the top right corner) is being covered by the background color of the map.
I know I probably just need to redraw the g layer after the transition, but I'm not able to get that working as expected.
I'm originally drawing the key on the map with the following code:
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(0,40)");
g.selectAll("rect")
.data(color.range().map(function(d) {
d = color.invertExtent(d);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d, i) { return 350 + (i * 30)})
.attr("width", 30)
.attr("fill", function(d) { console.log(d[1]); return color(d[1]); });
g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Number of Licensed Establishments");
g.call(d3.axisBottom(x)
.tickSize(13)
.tickValues(color.domain()))
.select(".domain")
.remove();
Then I'm transitioning the projection with this code (which also works fine).
path = d3.geoPath(projection);
svg.selectAll("path").transition().duration(2000).attr("d", path);
But the key gets covered. I've tried redrawing it like this:
g.selectAll("g").attr("transform", "translate(0,40)");
It doesn't do anything though. What step am I missing to correctly redraw that g layer on top?
Transitioning a path shouldn't change where it appears in the DOM. Transitioning element attributes with d3 modifies that element in place in the DOM. The following example should demonstrate this (path is appended first and should be behind the text, the path then transitions its d attribute through two d3 symbol paths remaining behind the text):
var svg = d3.select('body').append('svg').attr('width',400).attr('height',200);
var cross = "M-21.213203435596427,-7.0710678118654755L-7.0710678118654755,-7.0710678118654755L-7.0710678118654755,-21.213203435596427L7.0710678118654755,-21.213203435596427L7.0710678118654755,-7.0710678118654755L21.213203435596427,-7.0710678118654755L21.213203435596427,7.0710678118654755L7.0710678118654755,7.0710678118654755L7.0710678118654755,21.213203435596427L-7.0710678118654755,21.213203435596427L-7.0710678118654755,7.0710678118654755L-21.213203435596427,7.0710678118654755Z";
var star = "M0,-29.846492114305246L6.700954981042517,-9.223073285798176L28.38570081386192,-9.223073285798177L10.8423729164097,3.5229005144437298L17.543327897452222,24.146319342950797L1.7763568394002505e-15,11.400345542708891L-17.543327897452215,24.1463193429508L-10.842372916409698,3.522900514443731L-28.38570081386192,-9.22307328579817L-6.7009549810425195,-9.223073285798176Z";
var wye = "M8.533600336205877,4.926876451265144L8.533600336205877,21.9940771236769L-8.533600336205877,21.9940771236769L-8.533600336205877,4.9268764512651435L-23.31422969000131,-3.6067238849407337L-14.78062935379543,-18.387353238736164L0,-9.853752902530289L14.78062935379543,-18.387353238736164L23.31422969000131,-3.6067238849407337Z"
var symbol = svg.append('path')
.attr('transform','translate(100,100)')
.attr('d', cross )
.attr("fill","orange");
var text = svg.append('text')
.attr('x', 100)
.attr('y', 105)
.style('text-anchor','middle')
.text('THIS IS SOME TEXT')
symbol.transition()
.delay(2000)
.attr('d', star )
.duration(2000)
.transition()
.attr('d', wye )
.duration(2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
Given your example, it is likely that the key is initially rendered behind the features of the map - only there is no overlap between the two. Each appears as intended. When transitioning, with say a zoom, the features overlap and the key is hidden. As noted in the comments, try g.raise() or d3.select(".key").raise() to move the key to the bottom of the parent container, effectively lifting it above other svg elements (as elements are rendered in the order they appear in the DOM, as close as we get to a z-index in svg). You should only need to apply .raise() once - as the transition won't change the ordering, or alternatively, ensure that the key is appended to the svg last.
I have a Gantt chart that I built with D3 that has an associated filter where a user can select the shortest time, longest time, etc. So when the filter changes the xAxis modifies and some of the elements shift with time.
A have also drawn some lines connecting the elements selected by the filter.
When a selection is made in the filter, I remove the lines (via remove), change the color of the rectangles, and change the axis to the new timescale. However when i go to draw new lines, the references are being pulled from the old rectangles, prior to updating.
Here is the JSFiddle showing the issue: https://jsfiddle.net/3afumu4d/12/
To see issue: click the filter icon, then select "Shortest Time", the arrows will redraw but in the wrong location. It is drawing them in the location of rectangles prior to transition.
Here is my update method.
function updateData(){
//remove the lines
d3.select("#barsGroup").selectAll('line').remove();
//remove the arrows
d3.select("#barsGroup").selectAll('polyline').remove();
//based on selection, calculate start and end times
var checked = $('input[type=radio][name=timeline]:checked').attr('id');
taskArray.forEach(function(entry){
//if it is selected calculate its new start time.
if(illuminate(entry,checked)){
var newVal = root.startYear + getDelay(entry, checked);
entry.startTime = newVal.toString();
entry.endTime = (newVal + entry.time).toString();
}
});
var minX = d3.min(taskArray, function(d) {return dateFormat.parse(d.startTime);});
var maxX = d3.max(taskArray, function(d) {return dateFormat.parse(d.endTime);});
timeScale = d3.time.scale().domain([minX,maxX]).range([0,w-150]);
//update the boxes
var chart = d3.select("#innercontainer").transition();
//get all the rectangles, update all the rectangles
var updateBoxes = d3.select("#barsGroup").selectAll('rect')
.data(taskArray)
.transition()
.attr("x", function(d){return timeScale(dateFormat.parse(d.startTime)) + sidePadding;})
.attr("y", function(d, i){return i*gap + topPadding;})
.attr("width", function(d){return (timeScale(dateFormat.parse(d.endTime))-timeScale(dateFormat.parse(d.startTime)))})
.attr("fill", function(d){
for (var i = 0; i < categories.length; i++){
if (d.component == categories[i]){
//if true matches selection in filter
var checked = $('input[type=radio][name=timeline]:checked').attr('id');
if(illuminate(d,checked)){
return d3.rgb(colorScale(i));
}else{
return d3.rgb(colorScale(i)).darker(5);
}
//else show darker
}
}
})
.attr("opacity", function(d){
for (var i = 0; i < categories.length; i++){
if (d.component == categories[i]){
//if true matches selection in filter
var checked = $('input[type=radio][name=timeline]:checked').attr('id');
if(illuminate(d,checked)){
return 1.0;
}else{
return 0.4;
}
//else show darker
}
}
});
//Update the text boxes
var textlist = d3.select("#barsGroup").selectAll('text')
.data(taskArray)
.transition()
.attr("x", function(d){
return (timeScale(dateFormat.parse(d.endTime))-timeScale(dateFormat.parse(d.startTime)))/2 + timeScale(dateFormat.parse(d.startTime)) + sidePadding;
})
.attr("y", function(d, i){
return i*gap + 8+ topPadding;
})
.attr("fill", function(d){
for (var i = 0; i < categories.length; i++){
if (d.component == categories[i]){
//if true matches selection in filter
var checked = $('input[type=radio][name=timeline]:checked').attr('id');
if(illuminate(d,checked)){
return "#fff";
}else{
return "#3f3f3f";
}
}
}
}
);
//update grid lines
//scale the axis
xAxis = d3.svg.axis()
.scale(timeScale)
.orient('bottom')
.ticks(d3.time.year, 5) //TODO: change to years (skip every ten?)
.tickSize(-h+topPadding+20, 0, 0)
.tickFormat(d3.time.format('%Y'))
d3.select(".grid")
.transition()
.duration(750)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "middle")
.attr("fill", "#fff")
.attr("stroke", "none")
.attr("font-size", 10)
.attr("dy", "1em")
.each("end",drawArrows(taskArray,checked));;
}
The drawArrows method is what adds arrows to the newly highlighted path through the Gantt Chart. But its not getting new values.
Is there any way I can fire the drawArrows method after the DOM elements have updated?
I found the answer in another Stack Overflow question.
Essentially I needed to wait for all "rect" transitions to complete, so the rect x,y, width values were updated.
I used the endAll method approach found here: d3.js transition end event
I trying to understand how the D3 chord diagram works. My first step is to display the arcs for the diagram with following script. But for some reason, the arcs are not showing up.
See web page HERE
Can some one tell me what I am missing?
<body>
<script>
// Chart dimensions.
var width = 960,
height = 750,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.1;
//Create SVG element with chart dementions
var svg = d3. select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append ("g")
.attr("transform", "translate (" + width / 2 + "," + height / 2 + ")");
//------------Reformat Data ------------------------------------------
var matrix = []; // <- here is the data
d3.tsv('picData.tsv', function(err, data)
{
//console.log(data);
pictures = d3.keys(data[0]).slice(1);
//console.log(pictures);
data.forEach(function(row)
{
var mrow = [];
pictures.forEach(function(c)
{
mrow.push(Number(row[c]));
});
matrix.push(mrow);
//console.log(mrow);
});
//console.log('1st row: ' + matrix[0]);
//console.log(matrix);
});
//---------------- Define diagram layout ----------------------------
var chord = d3.layout.chord() //<-- produce a chord diagram from a matrix of input data
.matrix(matrix) //<-- data in matrix form
.padding(0.05)
.sortSubgroups(d3.descending);
var fill = d3.scale.category20(); //<-- https://github.com/mbostock/d3/wiki/API-Reference#d3scale-scales
//console.log(fill);
var g = svg.selectAll("g.group")
.data(chord.groups)
.enter().append("svg:g")
.attr("class", "group");
//console.log(g);
// create arcs
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
//console.log(arc);
g.append("path")
.attr("d", arc)
.style("fill", function(d) { console.log(d.index); return fill(d.index);})
.style("stroke", function(d) { return fill(d.index); })
.attr("id", function(d, i) { return"group-" + d.index });;
g.append("svg:text")
.attr("x", 6)
.attr("class", "picture")
.attr("dy", 15)
.append("svg:textPath")
.attr("xlink:href", function(d) { return "#group-" + d.index; })
.text(function(d) { return pictures[d.index]; });
//console.log(g);
</script>
</body>
Your problem stems from the fact that d3.tsv is asynchronous:
Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url... The request is processed asynchronously.
As a result, all of your code under "Define diagram layout" is being executed before any data is loaded. Otherwise, your code works fine (See image below). So just move all your code into your d3.tsv(...) call and you'll be all set.
Your script is running without errors, but no elements are being created from your data join. That's usually a sign that you are passing in a zero-length data array.
In fact, you're not passing in an array at all; you're passing a function object. When d3 looks up the array length of that object, it returns undefined, which gets coerced to the number zero, and so no groups and no chords are created.
Relevant part of your code:
var g = svg.selectAll("g.group")
.data(chord.groups)
.enter().append("svg:g")
.attr("class", "group");
To actually get the array of chord group data objects, you need to call chord.groups(). Without the () at the end, chord.groups is just the name of the function as an object.
Edited to add:
Ooops, I hadn't even noticed that your drawing code wasn't included inside your d3.tsv callback function. Fix that, as described in mdml's answer, then fix the above.
I'm new to D3, and spent already a few hours to find out anything about dealing with structured data, but without positive result.
I want to create a bar chart using data structure below.
Bars are drawn (horizontally), but only for user "jim".
var data = [{"user":"jim","scores":[40,20,30,24,18,40]},
{"user":"ray","scores":[24,20,30,41,12,34]}];
var chart = d3.select("div#charts").append("svg")
.data(data)
.attr("class","chart")
.attr("width",800)
.attr("height",350);
chart.selectAll("rect")
.data(function(d){return d3.values(d.scores);})
.enter().append("rect")
.attr("y", function(d,i){return i * 20;})
.attr("width",function(d){return d;})
.attr("height", 20);
Could anyone point what I did wrong?
When you join data to a selection via selection.data, the number of elements in your data array should match the number of elements in the selection. Your data array has two elements (for Jim and Ray), but the selection you are binding it to only has one SVG element. Are you trying to create multiple SVG elements, or put the score rects for both Jim and Ray in the same SVG element?
If you want to bind both data elements to the singular SVG element, you can wrap the data in another array:
var chart = d3.select("#charts").append("svg")
.data([data])
.attr("class", "chart")
…
Alternatively, use selection.datum, which binds data directly without computing a join:
var chart = d3.select("#charts").append("svg")
.datum(data)
.attr("class", "chart")
…
If you want to create multiple SVG elements for each person, then you'll need a data-join:
var chart = d3.select("#charts").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "chart")
…
A second problem is that you shouldn't use d3.values with an array; that function is for extracting the values of an object. Assuming you wanted one SVG element per person (so, two in this example), then the data for the rect is simply that person's associated scores:
var rect = chart.selectAll("rect")
.data(function(d) { return d.scores; })
.enter().append("rect")
…
If you haven't already, I recommend reading these tutorials:
Thinking with Joins
Nested Selections
This may clarify the nested aspect, in addition to mbostock's fine answer.
Your data has 2 degrees of nesting. You have an array of 2 objects, each has an array of ints. If you want your final image to reflect these differences, you need to do a join for each.
Here's one solution: Each user is represented by a group g element, with each score represented by a rect. You can do this a couple of ways: Either use datum on the svg, then an identity function on each g, or you can directly join the data on the g. Using data on the g is more typical, but here are both ways:
Using datum on the svg:
var chart = d3.select('body').append('svg')
.datum(data) // <---- datum
.attr('width',800)
.attr('height',350)
.selectAll('g')
.data(function(d){ return d; }) // <----- identity function
.enter().append('g')
.attr('class', function(d) { return d.user; })
.attr('transform', function(d, i) { return 'translate(0, ' + i * 140 + ')'; })
.selectAll('rect')
.data(function(d) { return d.scores; })
.enter().append('rect')
.attr('y', function(d, i) { return i * 20; })
.attr('width', function(d) { return d; })
.attr('height', 20);
Using data on the group (g) element:
var chart = d3.select('body').append('svg')
.attr('width',800)
.attr('height',350)
.selectAll('g')
.data(data) // <--- attach directly to the g
.enter().append('g')
.attr('class', function(d) { return d.user; })
.attr('transform', function(d, i) { return 'translate(0, ' + i * 140 + ')'; })
.selectAll('rect')
.data(function(d) { return d.scores; })
.enter().append('rect')
.attr('y', function(d, i) { return i * 20; })
.attr('width', function(d) { return d; })
.attr('height', 20);
Again, you don't have to create these g elements, but by doing so I can now represent the user scores differently (they have different y from the transform) and I can also give them different styles, like this:
.jim {
fill: red;
}
.ray {
fill: blue;
}