I am a complete novice at d3.js or java in general. I am using the indented tree example from http://bl.ocks.org/1093025. It took me two hours to get this to work on my local computer, so that should give you an idea of my skill level.
I opened the flare.json file and started messing with it and was able to manipulate it successfully. It looks like this
{
"name": "Test D3",
"children": [
{
"name": "News",
"children": [
{
"name": "CNN",
"size": 1000
},
{
"name": "BBC",
"size": 3812
}
]
},
{
"name": "Blogs",
"children": [
{
"name": "Engaget",
"size": 3938
}
]
},
{
"name": "Search",
"children": [
{
"name": "Google",
"size": 3938
},
{
"name": "Bing",
"size": 3938
}
]
}
]
}
What I want to do now, is to try to add hyperlinks. For example, I want to be able to click on "CNN" and go to CNN.com. Is there a modification I can make to flare.json that will do that?
It is quite easy, just add some more "key" : "value" pairs. Example:
"children": [
{
"name": "Google",
"size": 3938,
"url": "https://www.google.com"
},
{
"name": "Bing",
"size": 3938,
"url": "http://www.bing.com"
}
]
Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute.
Here is some html and d3-code that might be of help to you. First you need to import the xlink namespace in your html file:
<html xmlns:xlink="http://www.w3.org/1999/xlink">
...
</html>
Then in the d3 drawing code where you append nodes for each data element you wrap the element you want to be clickable links with an svg:a tag:
nodeEnter.append("svg:a")
.attr("xlink:href", function(d){return d.url;}) // <-- reading the new "url" property
.append("svg:rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", click); // <- remove this if you like
You might want to remove the click handler (which is present in the original example) by deleting the .on("click", click) as it might interfere with the default behavior of SVG links.
Clicking on your rects should now lead you to the appropriate url.
SVG links might not be fully implemented in all browsers.
Alternatively you could modify the click handler to read the URL from d.url and use that one to manually redirect the browser to that URL via JavaScript: window.location = d.url;. Then you do not need the svg:a tag and the xlink code. Though adding a real link (not a scripted one) has the benefit that the user/browser can decide what to do (e.g., open in new tab/page). It also helps if some of your users have JavaScript disabled.
Related
How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds
I am using stratify to build a d3 tree from a flat data structure. However, some fields are missing when I try to call them with d.data.fieldname
Here is my data structure:
var flatData = [
{"name": "Data Encrypted", "parent": null, "category": "test", "score": null },
{"name": "Malware on Target", "parent": "Data Encrypted", "category": "test", "score": null },
{"name": "Malware executed", "parent": "Data Encrypted", "category": "test", "score": "1" },
{"name": "Files modified", "parent": "Data Encrypted", "category": "test", "score": "1" },
];
I am building the hierarchical data structure with this stratify command:
var treeData = d3.stratify()
.id(function(d) { return d.name; })
.parentId(function(d) { return d.parent; })
(flatData);
The d3 tree is displayed correctly, and I can expand / collapse nodes etc, and display the ID and Name of each node using d.data.id and d.data.name respectively. If I try and use d.data.score or d.data.category to display data I get an 'undefined' error.
Any information that can help me get past this issue would be greatly appreciated.
I am trying to understand the right usage to achieve my collapsible tree d3 but unable to establish the proper parent/child references since I cannot use "parent". Attempting to use parentID.
This is my dataset I am testing with:
var result = [
{ "id": 1, "name": "Top Level", "parent": null, "parentId": "" },
{ "id": 2, "name": "PROD", "parent": "Top Level", "parentId": 1 },
{ "id": 3, "name": "QAT", "parent": "Top Level", "parentId": 1 },
{ "id": 4, "name": "App1", "parent": "PROD", "parentId": 2 },
{ "id": 5, "name": "App1", "parent": "QAT", "parentId": 3 },
{ "id": 6, "name": "ServerPROD001", "parent": "App1", "parentId": 4 },
{ "id": 7, "name": "ServerQAT001", "parent": "App1", "parentId": 5 }
];
and based on the collapsible tree:
// convert the flat data into a hierarchy
var treeData = d3.stratify()
.id(function (d) { return d.name; })
.parentId(function (d) { return d.parent })
(result);
This works fine if I do not include items 6 and 7. If I do include these I get an ambiguity error which makes sense because it cannot determine which "App1" to associate to.
I tried changing the code to use the parentId but just get an error of "missing:1" now.
// convert the flat data into a hierarchy
var treeData = d3.stratify()
.id(function (d) { return d.name; })
.parentId(function (d) { return d.parentId })
(result);
Note - I cannot change the "App1" name values to something unique as they will exist in multiple areas with that given name.
Since you have the id that is unique and not the name:
// convert the flat data into a hierarchy
var treeData = d3.stratify()
.id(function (d) { return d.id; }) // return the id instead of the name
.parentId(function (d) { return d.parentId })
(result);
and then set the name you need to be displayed like this:
// assign the name to each node as the initial name
treeData.each(function(d) {
d.name = d.data.name;
});
A working example can be found here, based on this
:)
Good luck!
I 'm trying to generate svg maps from the GEOFLA shapefiles.
Using 'bbox' bounds mode with manually setting the bbox values works well :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "bbox",
"data": [-4.5, 42, 8, 48],
},
"export": {
"width": 600,
"ratio": 0.8
}
}
But when setting the bounds mode to 'polygons', then i get an empty svg map :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "polygons",
"data": {
"layer": "depts"
},
"padding": 0.06
},
"export": {
"width": 600,
"ratio": 0.8
}
}
I had a look in kartograph files and i noticed that the "get_features" method in "map.py" return a Polygon which coordinates doesn't intersect with the features geometry previouly extracted from the shapefile.
Then, each feature are throw away in the "get_features" method of the "maplayer.py" file when checking if feature geometry intersects with the "layer.map.view_poly" property.
I had a similar problem using GEOFLA file projection.
The solution I've found is basically to change my shapefile projection using QGIS. My idea was to use the projection of the shapefile given in installation guide which worked for me.
Get example shape file from kartograph installation page
Load this vector layer in QGIS Add your GEOFLASH layer in QGIS
Right-click on GEOFLASH layer and "Save as..." menu
In the save window, give a new name for your layer (eg : DEPARTEMENT_WGS84.shp)
Click CSR button and select the test layer projection (WGS 84 / EPSG:4326)
Click OK
Check the new shape file has correct projection :
cat DEPARTEMENT_WGS84.prj
GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
Now your script should work fine using new shape file.
I've been digging d3.js for a few days by now and so far I love it.
I got into it while searching for a tree layout since I need one for my project. I came accross this example
I've accomplished the data-fetching and the stylish aspects to fit my site.
My question, since I wasn't able to get away with it is: How can I tell the tree not to be expanded at the beggining? I want the user to go clicking on the nodes as desired, because I always find myself un-clicking at the very start just to get the "flare" node alone.
Thanks in advance, if you know how to do it you can just add the code or re-work the one in the sample, I'll then apply it to the project I'm working on.
That example toggles children open or closed with this code:
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
So you can initialize the tree to be closed at a particular level by changing the original dataset from children to _children on any level you wish to start out as collapsed.
For example (from flare.json):
{
"name": "flare",
"_children": [
{
"name": "analytics",
"_children": [
{
"name": "cluster",
"_children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "HierarchicalCluster", "size": 6714},
{"name": "MergeEdge", "size": 743}
]
}
...
...