I'm trying to follow a d3 tutorial and I've created a JSFiddle for the following code
var dataset = [1,2,3,4,5];
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 75);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "red")
.attr("height", 40)
.attr("width", 75)
.attr("x", function(d, i){return i*80})
.attr("y", 20);
However, I see the generated circles in the svg but I can't see them on the screen. Can anyone see what I'm missing?
Here is a FIDDLE:
var dataset = [1,2,3,4,5];
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "red")
.attr("cx", function(d, i){return (i + 1 ) *60})
.attr("cy", 30)
.attr("r", 20);
I just focused on the main parts that needed change. You can study the differences. Basically, you had the wrong attributes for a circle (x and y, instead of cx and cy) and was missing the radius attribute. Finally, height and width are not circle attributes.
Related
I'm trying to add text to a vertical line using d3. In principle the text is attached to the line but it is not showing. Any idea why? Here is my code and and image of the current state.Code problem
Thanks in advance!
var espanya = aggregatevalue(data)[0]['2015'];
var svg = d3.select("#UnemploymentRate")
.append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
svg.append("g")
.attr("class", "espanya line")
var lespanya = d3.select(".espanya.line")
.append("line")
.attr("class", "line")
.style("stroke-width", 2)
.style("stroke", "black")
.style("stroke-dasharray", ("3, 3"))
.style("fill", "none");
lespanya.attr("x1", padding.left + widthScale(espanya))
.attr("y1", heightScale(maximo))
.attr("x2", padding.left + widthScale(espanya))
.attr("y2", h - padding.bottom);
lespanya.append("text")
.attr("x", 486.78)
.attr("y", 300)
.text("Spain Average unemployment");
You should not append that group to the line element. You can append both text and line to .espanya.
It has to be more or less like this,
var svg = d3.select("#UnemploymentRate")
.append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h);
var container = svg.append("g")
.attr("class", "espanya")
var lespanya = container
.append("line")
.attr("class", "line")
.style("stroke-width", 2)
.style("stroke", "black")
.style("stroke-dasharray", ("3, 3"))
.style("fill", "none");
var text = container
.append("text")
.attr("x", 486.78)
.attr("y", 300)
.text("Spain Average unemployment");
Try this and provide a jsfiddle if it doesn't work.
My goal here is to translate a group of svg elements with a translation. It is not working. Here is the code:
Create an SVG container
// create svg container
canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height);
Append a translation of x=200, y=200
// apply a transform
canvas.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
Add a box
// render a background
canvas.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
Add a y-axis
// render y-axis
canvas.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
The box + y-axis line never translates. For a sanity check I applied the translation direction to the box and it did translate. Sigh.
I am assuming the group translation implies a local coordinate system within with x = y = 0 would be the origin of the translated coordinate frame. No? What am I missing here?
The problem is, that the .append() function does not change the selection that it is called on, but returns a new selection.
Therefore the g element gets appended to the svg and the rect gets also appended to the svg and not inside the translated g element. You should see this if you inspect the svg output.
There are two possible solutions:
1: If you want to translate everything, append the g element in the first statement like so:
var canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
canvas.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
canvas.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
2: If you want to append something outside of the translated group,
assign the groupselection to a new variable like so:
var canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height);
var canvasGroup = canvas.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
canvasGroup.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
canvasGroup.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
Is it possible to add a background fill to a rect element? I am using rect elements to create a bar graph. Each rect element has a width and fill set. I want to fill the remaining width with a color.
See here: http://codepen.io/jesouhaite08/pen/fhvzA
Thanks!
For best flexibility I would use other rectangles to draw the background for your bars, check the forked example: http://codepen.io/anon/pen/JnlAE
// Bars
svg_fun.selectAll('rect.background')
.data(dataset)
.enter()
.append('rect')
.classed('background', true)
.attr('y', function(d, i) {return i * h_line; })
.attr('x', 0)
.attr('height', 20)
.attr('width', function(d) {return scale_x(max_x);} )
.attr('fill', 'red')
svg_fun.selectAll('rect.bar')
.data(dataset)
.enter()
.append('rect')
.classed('bar', true)
.attr('y', function(d, i) {return i * h_line; })
.attr('x', 0)
.attr('height', 20)
.attr('width', function(d) {return scale_x(d);} )
.attr('fill', 'teal')
I'm trying to read in a CSV and generate a circle for each line using d3.js.
[I'd prefer not to use a callback function but that's a different question.]
I'm able to create a table for each line of data following: http://christopheviau.com/d3_tutorial/
but I can't seem to generate a circle for each line:
d3.text("test.csv", function(datasetText) {
var parsedCSV = d3.csv.parseRows(datasetText);
var sampleSVG2 = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG2.selectall("circle")
.data(parsedCSV)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "blue")
This is probably not "correct" but it works. By calling a new svg area for each row and each circle it worked.
var sampleSVG = d3.select("#potato")
.data(parsedCSV)
.enter().append("circle")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "blue")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function(){d3.select(this).style("fill", "steelblue");});
I'm trying to draw multiple 'cross' symbols inside of a circle for use in a visualization. I'd like to draw the crosses in a 'g' tag and then apply a clipping path.
Is it possible to use clip paths with d3.svg.symbol ?
In the below example, the svg circle is masked correctly with the clip path; however the cross (the last part of the code) isn't.
Am I doing something wrong or is this not a feature?
var svg = d3.select("#maskingExample")
.append("svg:svg")
.attr("width", 500)
.attr("height", 200);
svg.append("svg:clipPath")
.attr("id", "clipper")
.append("svg:rect")
.style("stroke", "gray")
.style("fill", "black")
.attr("x", 50)
.attr("y", 25)
.attr("width", 300)
.attr("height", 45);
svg.append("g").append("svg:circle")
.style("stroke", "gray")
.style("fill", "blue")
.attr("cx", 175)
.attr("cy", 55)
.attr("r", 50)
.attr("clip-path", "url(#clipper)");
svg.append("g").append("path")
.attr("d", d3.svg.symbol()
.size( function(d) { return 3000; })
.type( function(d) { return d3.svg.symbolTypes[1]; }))
.attr("transform", "translate(150, 50)")
.attr("clip-path", "url(#clipper")
.style("fill", "black");
You're missing a close paren. Instead of
.attr("clip-path", "url(#clipper")
it should read
.attr("clip-path", "url(#clipper)")