I have a script, that works fine and create a chord diagram I need.
But now I want to create the same .svg file on another div but with different matrix.
Should I duplicate the same script for a new svg, or I can do in more efficient way?
You can find my code here.
Now my .Js script use drawChordWithMatrix(matrix_T1_T2) to show chord on div with id chart
What should I do to run drawChordWithMatrix(matrix_T2_T3) on id chart1
One way i can think is
1) Move the SVG creation into the drawChordWithMatrix
So you need to pass the id to which you need to attach the SVG.
something like this function drawChordWithMatrix(matrix, id), and you create your SVG in the function like this.
var svg = d3.select(id).append("svg")//selecting on basis of ID.
.attr("width", (width + margin.left + margin.right))
.attr("height", (height + margin.top + margin.bottom));
2) Next move all functions like fade, fadeOnChord , etc.. into the drawChordWithMatrix so that they all have the same scope.
working code here
Related
I am using D3.js and i try to create a svg inside an svg.
For example my first svg is this:
var svg = d3.selectAll('body')
.append('svg')
.attr('width',500)
.attr('height',500);
Then i want to create a second svg inside this first one and i want it to appear at the upper right corner of my first svg. How is that possible? I thought about the attributes of width = 100 and height = 100 for the second svg. The reason for this question is, that i use the force-layout in D3.js and it can be realy big depending on the input of data. So i want to put the graph itself in the first big svg and other informations like texts in the smaller second svg. If a solution with div elements could be better, please let me know.
Just append another SVG within the first.
var svg = d3.selectAll('body')
.append('svg')
.attr('width',500)
.attr('height',500);
var innerSVG = svg.append('svg')
.attr('width',100)
.attr('height',100);
I am using a set of sliders to generate an SVG image in d3. Whenever a slider changes, my corresponding SVG image should change.
To generate my SVG, I'm using the following code -
function build_svg(json_data) {
d3.select(".col-sm-6").select("svg").remove();
var svg = d3.select(".col-sm-6").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json(json_data, function(error, data) {
// Some logic to populate variable "svg"
}
}
The function build_svg is called whenever I want to put a new set of JSON data.
Unfortunately, every time I move my slider, I see a flickering image and I don't observe a smooth transition between the SVG images. What would be the best way to build this animation?
I have the following adapted d3.js visual and I'm unable to work out why the transition does not fire. The ars should rotate around to different sizes when the radio button is clicked.
It seems that clicking the radio button is changing the titles of the arc (if I hover the cursor over each)
Is this section of code to blame?
// check if svg group already exists
var svg = d3.select("#sunGroup");
if (svg.empty()) {
var svg = d3.select("#sunBurst")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr({
'transform': "translate(" + width / 2 + "," + height * .52 + ")",
id: "sunGroup"
});
}
Here is the full (not) working example:
https://plnkr.co/edit/hpvREU?p=preview
This is the transition I'm trying to hold onto: plnkr.co/edit/NnQUAp?p=preview
What I trying to do is move the logic at line 128 (starting d3.selectAll("input").on("change", function change() {...) out of this function
An easy fix to your problem is to remove all children of the SVG whenever you switch data types:
d3.select("#sunBurst").selectAll('*').remove()
That way, you are binding the new data to new elements. You can also remove the svg.empty() and d3.select('#sunGroup') code. This simple fix lets you switch between pie charts, and is in the spirit of the code you currently have. Here's the users pie chart.
However, this may not be the best way to do what you're trying to achieve. As a reference, see Mike Bostock's General Update Pattern series (link is to first in the series) for how to update your SVG.
My D3.js code is here:
https://jsfiddle.net/xyt4pbpo/11/
and Im trying to inject the graph into this haml view container within a rails app:
%section.content
.row
.col-xs-12
.panel.panel-primary
.panel-heading
%h3.panel-title
%i.fa.fa-bar-chart-o
Charging Sessions
.panel-body
#charging-sessions-chart
I know the issue starts on line 119 where I changed the d3.select to #charging-sessions-chart, but the problem is I need it embedded within that ID:
var svg = d3.select("#charging-sessions-chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
My question is how would I resolve this clipping issue?
EDIT: heres a photo of whats going on:
http://imgur.com/a8o9xX3
EDIT2: The graph looks fine until I utilize the brushing feature
EDIT3: The graph works perfectly fine outside of the rails environment. Must be something with the rails app.
I created a working plunk. I modified line 310 to add the clip-path as an attribute on the lines, as it is not a css style.
On a side note, I would personally create a group to contain all the lines and set the clip path on it, but the design is yours :-).
I am new to D3.js, started learning today only
I looked the the donut example and found this code
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
I searched for documentation, but did not understood what .append("g") is appending
Is it even D3 specific?
Looking for guidance here
It appends a 'g' element to the SVG. g element is used to group SVG shapes together, so no it's not d3 specific.
I came here from a d3 learning curve as well. As already pointed out this is not specific to d3, it is specific to svg attributes. Here is a really good tutorial explaining the advantages of svg:g (grouping).
It is not that different from the use case of "grouping" in graphical drawings such
as ones you would do in a powerpoint presentation.
http://tutorials.jenkov.com/svg/g-element.html
As pointed in above link: to translate you need to use translate(x,y):
The <g>-element doesn't have x and y attributes. To move the contents
of a <g>-element you can only do so using the transform attribute,
using the "translate" function, like this: transform="translate(x,y)".