The following code is supoosed to draw five circles next to each other
<head>
<script type='text/javascript' src='jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script src="bootstrap.min.js"></script>
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<link href="sticky-footer.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
var dataset = [],
i = 0;
for(i=0; i<5; i++){
dataset.push(Math.round(Math.random()*100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 400);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "black")
.attr("height", 40)
.attr("width", 75)
.attr("x", 50)
.attr("y", 20);
</script>
</html>
It is not really my code I just copied it from this website
http://christopheviau.com/d3_tutorial/
The problem is that this code does not draw any circle.
Although that when I try to use the chrome's tool inspect element, I find that the circles are there but they are not visible.
I thought that the reason is the white colour of the circles although the stroke is not.
However changing the colour was not really useful.
And the problem is that Dreamweaver is not really helping as it does for HTML or JavaScript for example.
Any suggestions for the solution of this issue, or any recommendation for the editor ?
It looks like you took an example that generated rectangles and changed it to circles but circles don't have x, y, height and width attributes, they have cx, cy and radius attributes instead.
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "black")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 20);
Will draw multiple circles one on top of another.
#Robert Longson
Thank Robert Longson
And if you want to avoid the interlapping between the circles
Here is the code
<script type="text/javascript">
var dataset = [],
i = 0;
for(i=0; i<5; i++){
dataset.push(Math.round(Math.random()*100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 500)
.attr("height", 300);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", function(d, i){return 50 + (i*80)})
.attr("cy", 120);
</script>
Related
I'm using this code to create a compass needle on an HTML page (instead of the range input i'm using data derived form a separate software). However, I'd like to add a compass face image behind it. Any ideas how I do that? Thanks (The code is from another thread by #Coderino Javarino) Perhaps you can help if you see this?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<input type="range" min="0" max="360" value="0" id="slider" oninput="updateAngle(this.value)">
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200)
.attr('viewBox', '-50 -50 100 100')
var path_d = "M 0,0 L 0,-10 L 50,0 L 0,10 Z";
function updateAngle(value) {
var angle = parseInt(value);
var data = [{
angle: angle,
color: 'black'
}, {
angle: (180 + angle) % 360,
color: 'red'
}];
paths = svg.selectAll('path')
.data(data);
paths.enter()
.append('path')
.attr('d', path_d)
.merge(paths)
.style('fill', d => d.color)
.attr('transform', d => `rotate(${d.angle})`);
paths.exit().remove();
}
updateAngle(0);
</script>
</body>
I have following font awesome reference
<link href="css/fontawesome-free-5.12.1-web/css/all.css" rel="stylesheet">
<script defer src="css/fontawesome-free-5.12.1-web/js/all.js"></script>
Alternatively I also have premium kit reference
<script src="https://kit.fontawesome.com/7xxxx.js" crossorigin="anonymous"></script>
Both references renders icons on Google Chrome, but fails to work on Safari (iOS)
Console error says
NoModificationAllowedError: The object can not be modified
Here is the code all.js fontawesome library that is having issues
if (node.parentNode && node.outerHTML) {
node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');
} else if (node.parentNode) {
var newNode = document.createElement('span');
node.parentNode.replaceChild(newNode, node);
newNode.outerHTML = newOuterHTML;
}
How can I make this work for safari?
node.outerHTML = newOuterHTML + (config.keepOriginalSource && node.tagName.toLowerCase() !== 'svg' ? "<!-- ".concat(node.outerHTML, " -->") : '');
For some reason font-awesome <i> tag with font-awesome class inside SVG works on Chrome but not on safari.
So I had to replace my code
Old code:
var svg = d3.select("body")
.append("svg")
.attr("width", 800)
.attr("height", 900)
.append("i")
.attr("class", ({ property }) => {
const styleClass = getIconClass({ property})
return styleClass
})
Replaced to:
var svg = d3.select("body")
.append("svg")
.attr("width", 800)
.attr("height", 900);
var y = 70;
var x=10;
["\uf083", "\uf0c2", "\uf7ad", "\uf738", "\uf185"].forEach(function(code, i) {
svg.append("text")
.attr("x",x)
.attr("y",y)
.attr("style", "font-family: 'Font Awesome 5 Pro'; font-weight: 900; ")
.attr('font-size', function(d) { return '70px';} )
.text(function(d) { return code; });
y+=70;
x+=70;
});
JS Fiddle
I'm experimenting with using multiple class names for SVG elements so that (hopefully) I could select a subset of them using selectAll and "parts" of the class name. Unfortunately nothing I've tried works and I haven't found an example online. The code below demonstrates what I'm trying to do with a simple example of four circles. Two circles have class name "mYc 101" and two circles have class name "mYc 202". selectAll(".mYc") gives all four circles. What if I want only the circles with class name "mYc 101"? Can this be done? How? Thanks times infinity!!
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="my_div"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var m_div = d3.select("#my_div");
var m_svg = m_div.append("svg");
var g = m_svg.append("g");
g.append("circle")
.attr("class", "mYc 101")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50)
.attr("style", "stroke: green; stroke-width: 8; fill: #000000");
g.append("circle")
.attr("class", "mYc 101")
.attr("cx", 300)
.attr("cy", 100)
.attr("r", 50)
.attr("style", "stroke: green; stroke-width: 8; fill: #000000");
g.append("circle")
.attr("class", "mYc 202")
.attr("cx", 100)
.attr("cy", 300)
.attr("r", 50)
.attr("style", "stroke: blue; stroke-width: 8; fill: #000000");
g.append("circle")
.attr("class", "mYc 202")
.attr("cx", 300)
.attr("cy", 300)
.attr("r", 50)
.attr("style", "stroke: blue; stroke-width: 8; fill: #000000");
// This selects all four circles
var list = d3.selectAll(".mYc");
// But if I want to select only class "mYc 101", none of these work.
// In fact they all give an error.
// var list1 = d3.selectAll(".mYc 101");
// var list1 = d3.selectAll(".mYc .101");
// var list1 = d3.selectAll(".mYc.101");
// var list1 = d3.selectAll(".mYc,.101");
// var list1 = d3.selectAll(".101");
</script>
</body>
The most D3 way to do this would be to chain the selectors using the filter method:
var list1 = d3.selectAll(".mYc").filter(".101");
This won't work though because class names cannot start with a number. So you have to rename to something like "a101" and then you can do
var list1 = d3.selectAll(".mYc").filter(".a101");
See this fiddle.
Another way I have found to do this is to select both classes at the same time as a single string, for example:
var list1 = d3.selectAll(".mYc.a101")
It won't work if you add in a space in between, or add a comma in between (which selects things that have either class instead).
As shown in the image, a circle drawn with center at 0,0 displays correctly on chrome, but on IE10 it overflows the SVG bounds. What do I need to do to get this to render correctly on IE?
Here is the code:
<body>
<div id="chart1">
</div>
<script>
var width = 50,height = 50;
var SVGmap = d3.select("#chart1")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = SVGmap.append("g");
g.append("circle")
.style("stroke", "gray")
.style("fill", "red")
.attr("r", 40)
.attr("cx", 0)
.attr("cy", 0)
</script>
</body>
Thanks Robert. Adding .attr("overflow", "hidden") to the SVG Element solves this.
I'm adapting the zoomable and clickable map found http://bl.ocks.org/mbostock/2206340 at to plot some points and do some other things. Right now, I'm trying to make it such that on the zoom and click actions, the plotted points also move / honor the zoom. I'm not sure what in the code here is wrong, since I seem to be calling the red.circle and blue.circle objects in the zoom + click -- can anyone identify the issue? Thanks! data.csv is formatted as follows:
lon_0,lat_0,lon_1,lat_1
-122.1430195,37.4418834,-122.415278,37.778643
-122.1430195,37.4418834,-122.40815,37.785034
-122.4194155,37.7749295,-122.4330827,37.7851673
-122.4194155,37.7749295,-122.4330827,37.7851673
-118.4911912,34.0194543,-118.3672828,33.9164666
-121.8374777,39.7284944,-121.8498415,39.7241178
-115.172816,36.114646,-115.078011,36.1586877
and here is the d3.js script.
.background {
fill: none;
pointer-events: all;
}
#states path {
fill: #aaa;
stroke: #fff;
stroke-width: 1.5px;
}
#states path:hover {
stroke: white;
}
</style>
<body>
<script>
var width = 1920/2,
height = 1000/2;
var projection = d3.geo.albersUsa()
.scale(width)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([height, 50 * height])
.on("zoom", zoom);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("style", "stroke:black; stroke-width:2px");
var states = svg.append("g")
.attr("id", "states")
.call(zoom);
var dataset = [];
states.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
d3.json("us-states.json", function(json) {
states.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
.on("click", click);
d3.csv("data.csv", function(data) {
states.selectAll(".blue.circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d["lon_0"], d["lat_0"] ])[0];
})
.attr("cy", function(d) {
return projection([d["lon_0"],d["lat_0"] ])[1];
})
.attr("r", 5)
.attr("class", "blue circle")
.style("fill", "blue");
states.selectAll(".red.circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([+d["lon_1"], +d["lat_1"] ])[0];
})
.attr("cy", function(d) {
return projection([+d["lon_1"],+d["lat_1"] ])[1];
})
.attr("r", 5)
.attr("class", "red circle")
.style("fill", "red");
});
});
function click(d) {
var centroid = path.centroid(d),
translate = projection.translate();
projection.translate([
translate[0] - centroid[0] + width / 2,
translate[1] - centroid[1] + height / 2
]);
zoom.translate(projection.translate());
states.selectAll("path").transition()
.duration(1000)
.attr("d", path);
states.selectAll("red.circle").transition()
.duration(1000)
.attr("d", circle);
states.selectAll("blue.circle").transition()
.duration(1000)
.attr("d", circle);
}
function zoom() {
projection.translate(d3.event.translate).scale(d3.event.scale);
states.selectAll("path").attr("d", path);
states.selectAll("red.circle").attr("d", path);
states.selectAll("blue.circle").attr("d",path);
}
</script>
you're setting the co-ordinates of the circles when you load the map, so when you click the zoom function, your circles are displayed but are not using the same co-ordinates - i think - it will help if you can create a http://bl.ocks.org to see this.
perhaps this could be of help http://bl.ocks.org/nkhine/3150901 only UK, US and Afganistan works, but i am basically re-projecting the secondary map to fit the new zoom level.