I'm trying to display circles by accessing the values for the radius by referencing a dictionary. I can already do it when my vaues are in an array buw when I represent them as a dictionary I get a syntax error, even though d.keyName seems to be the recommended way to do it.
Section of code that works
%%javascript
require.config({
paths: {
d3: 'https://d3js.org/d3.v5.min'
}
});
(function(element) {
require(['d3'], function(d3) {
var data = [4, 8, 4]
var svg = d3.select(element.get(0)).append('svg')
.attr('width', 400)
.attr('height', 200);
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.style('fill', 'orange')
.attr("r", function(d) {return 2*d;})
.attr("cx", function(d, i) {return 30 * (i + 1);})
.attr("cy", function(d, i) {return 100 + 30 * (i % 3 - 1);})
;
})
})(element);
And this is what doesn't work:
%%javascript
require.config({
paths: {
d3: 'https://d3js.org/d3.v5.min'
}
});
(function(element) {
require(['d3'], function(d3) {
//var data = [4, 8, 4]
//var words = ["milk", "but", "hey"]
var data = [{'num': 4, 'word': 'milk'}, {'num': 8, 'word': 'but'}, {'num': 4, 'word': 'hey'}];
var svg = d3.select(element.get(0)).append('svg')
.attr('width', 400)
.attr('height', 200);
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.style('fill', 'orange')
.attr("r", function(d.num) {return 2*d.num; })
.attr("cx", function(d.num, i) {return 30 * (i + 1); })
.attr("cy", function(d.num, i) {return 100 + 30 * (i % 3 - 1); })
//.attr("r", function(d) {return 2*d;})
//.attr("cx", function(d, i) {return 30 * (i + 1);})
//.attr("cy", function(d, i) {return 100 + 30 * (i % 3 - 1);})
;
})
})(element);
Javascript error adding output!
SyntaxError: Unexpected token .
See your browser Javascript console for more details.
2outputarea.js:764 SyntaxError: Unexpected token .
at OutputArea.append_javascript (outputarea.js:762)
at OutputArea.append_mime_type (outputarea.js:696)
at OutputArea.append_display_data (outputarea.js:659)
at OutputArea.append_output (outputarea.js:346)
at OutputArea.handle_output (outputarea.js:257)
at output (codecell.js:395)
at Kernel._handle_output_message (kernel.js:1196)
at i (jquery.min.js:2)
at Kernel._handle_iopub_message (kernel.js:1223)
at Kernel._finish_ws_message (kernel.js:1015)
Syntax error. Because you want to pass object.property as parameter to attribute callback
function(d.num) {return 2*d.num; }
Use function(d) {return 2*d.num; }.
d is your current datum in array (or data[i])
Check this information and how d3 selection works
Related
I am trying to update the color of the graph, on updating, all the previous graphs are also visible
Here is my code:-
class BarChart extends Component {
state = {
color: "green",
};
componentDidUpdate = (prevProps, prevState) => {
if (prevState.color != this.props.color) {
this.drawChart();
}
};
drawChart() {
const data = [12, 5, 6, 6];
const svg = d3
.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)
svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 70)
.attr("y", (d, i) => 400 - 10 * d)
.attr("width", 65)
.attr("height", (d, i) => d * 10)
.attr("fill", this.props.color);
svg
.selectAll("text")
.data(data)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 70)
.attr("y", (d, i) => 400 - 10 * d - 3);
svg.data(data).exit().remove();
}
render() {
return <div>{this.drawChart}</div>
);
}
}
I've figured that I need to change the selectAll part, but don't know exactly how to change it?
You need to include an .exit declaration
svg
.selectAll("text")
.data(data)
.exit()
.remove()
svg
.selectAll("rect")
.data(data)
.exit()
.remove()
http://bl.ocks.org/alansmithy/e984477a741bc56db5a5
You may want to instead use a .selectAll("g") element/container to avoid having to maintain 'text' and 'rect' selections separately.
I've got a legend, with colored rectangles...
I'd like to replace the rectangles with symbols (i.e., circle, cross, diamond, square). I can't figure out how to do that.
I've been using variations of .attr("d", d3.svg.symbol().type('circle'). For instance, I tried:
legendRect
.attr("d", d3.svg.symbol().type(function (d) { return d[2] })
and I tried:
legendRect.append("svg:path")
.attr("d", d3.svg.symbol().type((d: any) => { return d[2] }))
d[2] is "supposed to be" pulling from legendData, as shown in the below code example...like it does with d[1] for the fill.
But I don't ever see anything change.
Here's the code I'm using for the legend, without the symbol stuff, below. What am I doing wrong and how can I change the rectangles to symbols? Where do I need to add what?
var legendData = [["OA", "yellow", "circle"], ["OI", "blue", "cross"], ["RARC", "green", "diamond"], ["CAPE", "red", "square"], ["Other", "black", "triangleDown"]];
var legend = this.svg.append("g")
.attr("class", "legend")
.attr("height", 0)
.attr("width", 0)
.attr('transform', 'translate(-20,250)');
var legendRect = legend.selectAll('rect').data(legendData);
legendRect.enter()
.append("rect")
.attr("x", width - 65)
.attr("width", 10)
.attr("height", 10)
;
legendRect
.attr("y", function (d, i) {
return i * 20;
})
.style("fill", function (d) {
return d[1];
})
var legendText = legend.selectAll('text').data(legendData);
legendText.enter()
.append("text")
.attr("x", width - 52);
legendText
.attr("y", function (d, i) {
return i * 20 + 9;
})
.text(function (d) {
return d[0];
});
Here's how I would code it. Notice, that I data-bind to a wrapper g element and then place the symbol and text into it for each legend item. You can then position the g instead of positioning the text and "symbol" separately. This also removes the need for double-binding the data.
var legendData = [["OA", "yellow", "circle"], ["OI", "blue", "cross"], ["RARC", "green", "diamond"], ["CAPE", "red", "square"], ["Other", "black", "triangleDown"]];
var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 500);
var legend = svg.append('g')
.attr("class", "legend")
.attr("height", 0)
.attr("width", 0)
.attr('transform', 'translate(20,20)');
var legendRect = legend
.selectAll('g')
.data(legendData);
var legendRectE = legendRect.enter()
.append("g")
.attr("transform", function(d,i){
return 'translate(0, ' + (i * 20) + ')';
});
legendRectE
.append('path')
.attr("d", d3.svg.symbol().type((d) => { return d[2] }))
.style("fill", function (d) {
return d[1];
});
legendRectE
.append("text")
.attr("x", 10)
.attr("y", 5)
.text(function (d) {
return d[0];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
This is a implementation which uses symbols for your legend. You can use the symbols like the following:
svg.selectAll('.symbol')
.data(legendData)
.enter()
.append('path')
.attr('transform', function(d, i) {
return 'translate(' + (20) + ',' + ((i * 20) + 10) + ')';
})
.attr('d', d3.symbol().type(function(d, i) {
if (d[2] === "circle") {
return d3.symbolCircle;
} else if (d[2] === "cross") {
return d3.symbolCross;
} else if (d[2] === "diamond") {
return d3.symbolDiamond;
} else if (d[2] === "square") {
return d3.symbolSquare;
} else {
return d3.symbolTriangle;
}
})
.size(100))
.style("fill", function(d) {
return d[1];
});
Then you can set your legend labels like the following:
svg.selectAll('.label')
.data(legendData)
.enter()
.append('text')
.attr("x", "40")
.attr("y", function(d, i){ return ((i * 20)+15);})
.text(function(d) {
return d[0];
});
Check fiddle here - https://jsfiddle.net/zoxckLe3/
P.S. - Above solution uses d3 v4. To achieve the same in v3, use the following line .attr('d', d3.svg.symbol().type(function(d){return d[2];})) instead of the part where I match d[2] to the symbol name.
For adding image icons, you can use below code.
legend.append("**image**")
.attr("x", 890)
.attr("y", 70)
.attr("width", 20)
.attr("height", 18)
.attr("xlink:href",function (d) {
**return "../assets/images/dev/"+d+".png";**
})
This works for me..
I'm trying to get drag functionality to work on D3, and have copied the code directly from the developer's example.
However it seems the origin (what is being clicked) is not being passed correctly into the variable d, which leads to the error: 'Cannot read property 'x' of undefined'
The relevant code:
var drag = d3.behavior.drag()
.on("drag", function(d,i) {
d.x += d3.event.dx
d.y += d3.event.dy
d3.select(this).attr("transform", function(d,i){
return "translate(" + [ d.x,d.y ] + ")"
})
});
var svg = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 300);
var group = svg.append("svg:g")
.attr("transform", "translate(10, 10)")
.attr("id", "group");
var rect1 = group.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5)
.call(drag);
Usually, in D3 you create elements out of some sort of datasets. In your case you have just one (perhaps, one day you'll want more than that). Here's how you can do it:
var data = [{x: 2.5, y: 2.5}], // here's a dataset that has one item in it
rects = group.selectAll('rect').data(data) // do a data join on 'rect' nodes
.enter().append('rect') // for all new items append new nodes with the following attributes:
.attr('x', function (d) { return d.x; })
.attr('y', function (d) { return d.y; })
... // other attributes here to modify
.call(drag);
As for the 'drag' event handler:
var drag = d3.behavior.drag()
.on('drag', function (d) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this)
.attr('transform', 'translate(' + d.x + ',' + d.y + ')');
});
Oleg's got it, I just wanted to mention one other thing you might do in your case.
Since you only have a single rect, you can bind data directly to it with .datum() and not bother with computing a join or having an enter selection:
var rect1 = svg.append('rect')
.datum([{x: 2.5, y: 2.5}])
.attr('x', function (d) { return d.x; })
.attr('y', function (d) { return d.y; })
//... other attributes here
.call(drag);
I'm having a bit of trouble understand selections and filtering in d3. Let's say I have a simple array:
data = [1, 2, 6, 3, 4]
I want to draw circles if the value < 5 and squares if it's >= 5. My code right now only draws circles and looks like this:
var svg = d3.select("body").append("svg")
svg.selectAll("shapes")
.data(data)
.enter()
.append("circle")
and other attributes for circles. I need to use the .filter() method, but I don't know where to put it. I tried doing something like:
var svg = d3.select("body").append("svg")
svg.selectAll("shapes")
.data(data)
.enter()
.filter(function(d){if (d>5){console.log('working');})
.append("circle")
but then I get an error with the append method. Can someone point me in the right direction on how I'd accomplish this?
The problem is that after you .enter() you are returning a nested array, hence your error:
Uncaught TypeError: Object [object Array] has no method 'append'
To use .filter(), you need to apply it after the .append():
var data = d3.range(10);
var svg = d3.select("body").append("svg");
var shapes = svg.selectAll(".shapes")
.data(data).enter();
shapes.append("circle")
.filter(function(d){ return d < 5; })
.attr("cx", function(d, i){ return (i+1) * 25; })
.attr("cy", 10)
.attr("r", 10);
shapes.append("rect")
.filter(function(d){ return d >= 5; })
.attr("x", function(d, i){ return (i+1) * 25; })
.attr("y", 25)
.attr("width", 10)
.attr("height", 10);
Using the code above (also in this fiddle), I get the following output:
Note that you can also achieve the same effect using Array's filter method, e.g.
var shapes = svg.selectAll(".shapes")
.data(data.filter(function(d){ return d < 5; })).enter()
.append("circle")
.attr("cx", function(d, i){ return (i+1) * 25; })
.attr("cy", 10)
.attr("r", 10);
It is also possible use the data to conditionally create circles or rectangles by providing a function argument to the append function
.append(function(d, i){
if (something to do with d) {
... return an SVG circle element
} else {
... return an SVG rectangle element
}
})
e.g. like this
var data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var svg = d3.select("body").append("svg");
function createSvgEl(name) {
return document.createElementNS('http://www.w3.org/2000/svg', name);
}
svg
.selectAll(".shapes")
.data(data)
.enter()
.append(function(d, i){
if (d <= 4) {
return createSvgEl("circle");
} else {
return createSvgEl("rect");
}
});
svg.selectAll("circle")
.attr("cx", function(d, i){ return (i+1) * 25; })
.attr("cy", 10)
.attr("r", 10);
svg.selectAll("rect")
.attr("x", function(d, i){ return (i+1) * 25; })
.attr("y", 25)
.attr("width", 10)
.attr("height", 10);
I Need your help... why is this Chart not running.. Error in Console (d3.v2.js Zeile 2396):
TypeError: string.substring is not a function
var n = d3_time_numberRe.exec(string.substring(i, i + 2));
Could anybody help me please?
<script type="text/javascript">
var w = 960,
h = 500,
p = [20, 50, 30, 20],
x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
y = d3.scale.linear().range([0, h - p[0] - p[2]]),
z = d3.scale.ordinal().range(["lightpink", "darkgray", "lightblue"]),
parse = d3.time.format("%m/%Y").parse,
format = d3.time.format("%b");
var data = [
[
new Date('1991-01-18T00:00:00'),
52.380001068115234,
28.56999969482422,
10.0
],
[
new Date('1994-11-17T00:00:00'),
57.88999938964844,
21.049999237060547,
10.0
]
];
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");
// Transpose the data into layers by cause.
var causes = d3.layout.stack()([data[1], data[2], data[3]].map(function(cause) {
return data.map(function(d) {
return {x: parse(d[0]), y: +d[cause]};
});
}));
// Compute the x-domain (by date) and y-domain (by top).
x.domain(causes[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]);
// Add a group for each cause.
var cause = svg.selectAll("g.cause")
.data(causes)
.enter().append("svg:g")
.attr("class", "cause")
.style("fill", function(d, i) { return z(i); })
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });
// Add a rect for each date.
var rect = cause.selectAll("rect")
.data(Object)
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); })
.attr("width", x.rangeBand());
// Add a label per date.
var label = svg.selectAll("text")
.data(x.domain())
.enter().append("svg:text")
.attr("x", function(d) { return x(d) + x.rangeBand() / 2; })
.attr("y", 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")
.text(format);
// Add y-axis rules.
var rule = svg.selectAll("g.rule")
.data(y.ticks(5))
.enter().append("svg:g")
.attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + -y(d) + ")"; });
rule.append("svg:line")
.attr("x2", w - p[1] - p[3])
.style("stroke", function(d) { return d ? "#fff" : "#000"; })
.style("stroke-opacity", function(d) { return d ? .7 : null; });
rule.append("svg:text")
.attr("x", w - p[1] - p[3] + 6)
.attr("dy", ".35em")
.text(d3.format(",d"));
</script>
The problem is here:
var causes = d3.layout.stack()([data[1], data[2], data[3]].map(function(cause) {
return data.map(function(d) {
return {x: parse(d[0]), y: +d[cause]};
});
}));
d[0] is already a date object - new Date('1991-01-18T00:00:00') - and parse is expecting a string.
Instead, pass d[0] directly:
return {x: d[0], y: +d[cause]};
Sidenote: check out the debugging tools for chrome. Most of the error messages you get working with d3 will not give very useful messages (like "TypeError: string.substring is not a function") and being able to look through the stack is extremely helpful.