Does anyone know where I can find a good example that shows how to add text to relationship lines in force directed graphs?
I'm building a "Force Directed Radial Graph <http://bl.ocks.org/2879486>" example to learn about force layouts. I've been able to successfully and append text to the nodes but I can't seem to get it to work with lines.
When I look at the line in the debugger, it looks as follows...
> Does anyone know where I can find a good example that shows how to add
> text to relationship lines in force directed graphs?
> I'm building a "Force Directed Radial Graph <http://bl.ocks.org/2879486>"
> example to learn about force layouts. I've been able to successfully and
> append text to the nodes but I can't seem to get it to work with lines.
> When I look at the line in the debugger, it looks as follows...
May I ask if you have a gist post that shows the working example? Without
it, I tried to follow your code to the best of my ability and applied it to
my own "Force Directed Radial Graph <http://bl.ocks.org/2879486>" example.
However, I have the problem that the link text is not rendering.
When I look at the HTML code, it looks like I'm chaining elements together,
properly, (i.e. <line><g><text></text></g></line>) but the x and y values
always seem to evaluate to "0". The elements look like:
BTW, I get the circular relationship concept. I think your approach is
very cool. I'm not dealing w/ circular relationships just yet, but I will
be soon enough. So, thanks for the code.
My Best,
Frank
On Thu, Jun 7, 2012 at 12:03 PM, Chris Michael <mechr...@googlemail.com>wrote:
> I sometimes have links that connect a node to itself do some of the code
> above will probably be superflous for you needs.
> I am sure there are better ways of doing it, but it did work.
> Chris
> On 7 June 2012 03:21, Guerino1 <fgueri...@gmail.com> wrote:
>> Hi,
>> Does anyone know where I can find a good example that shows how to add
>> text to relationship lines in force directed graphs?
>> I'm building a "Force Directed Radial Graph <http://bl.ocks.org/2879486>"
>> example to learn about force layouts. I've been able to successfully and
>> append text to the nodes but I can't seem to get it to work with lines.
>> When I look at the line in the debugger, it looks as follows...
I use the polyline to allow for circular relationships, but it works fine
for non circular relationships too.
If you want to send a snippet of code I am happy to have a quick look to
see if I can spot the problem
I have just looked at my web app, and seen that I actually use two
different methods in two different places.
The code above is how I first did it, then later, I did away with the <g>
element and just had the texts as standalone elements.
The code I used in the latter case was even simpler:
var nodeText = vis.selectAll("text").data(data.nodes)
nodeText.enter().append("text")
.text(function(d) {return d.name})
.call(oModules.ConsultationModule.force.drag)
and
oModules.ConsultationModule.force.on("tick", function ()
{
link.attr("points", function (d) { return renderLinks(d)})
node.attr("x", function (d) { return d.x-25; }).attr("y", function (d) {
return d.y-10; })
nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function (d)
{ return d.y; })
})
in case you want the entire function it is below, although the lines above
are the important bit.
function renderSSM(json)
{
try
{
data=json
oModules.ConsultationModule.force.nodes(data.nodes)
oModules.ConsultationModule.force.links(data.links)
oModules.ConsultationModule.force.start();
var vis = oModules.ConsultationModule.vis
var fill = d3.scale.category20(); //twenty colors
var link = vis.selectAll("polyline").data(data.links)
link.enter().append("polyline").attr("class", "link")
.attr("stroke", "black").style("stroke-width",
"2").attr("fill","none").attr("points", function (d) { return
renderLinks(d)})
var node = vis.selectAll("rect").data(data.nodes)
node.enter().append("rect")
.attr("width", function(d) {var w=120; if (d.name.indexOf("?")>-1) w=70;
return w;}).attr("height", 20)
.attr("rx", 6).attr("ry", 6).attr("stroke","1")
.style("fill", function (d) { return fill(d.group); })
.call(oModules.ConsultationModule.force.drag) ;
var nodeText = vis.selectAll("text").data(data.nodes)
nodeText.enter().append("text")
.text(function(d) {return d.name})
.call(oModules.ConsultationModule.force.drag)
oModules.ConsultationModule.doResize()
oModules.ConsultationModule.force.on("tick", function ()
{
link.attr("points", function (d) { return renderLinks(d)})
node.attr("x", function (d) { return d.x-25; }).attr("y", function (d) {
return d.y-10; })
nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function (d)
{ return d.y; })
});
}
On 7 June 2012 21:31, Frank Guerino <fgueri...@gmail.com> wrote:
> May I ask if you have a gist post that shows the working example? Without
> it, I tried to follow your code to the best of my ability and applied it to
> my own "Force Directed Radial Graph <http://bl.ocks.org/2879486>"
> example. However, I have the problem that the link text is not rendering.
> When I look at the HTML code, it looks like I'm chaining elements
> together, properly, (i.e. <line><g><text></text></g></line>) but the x and
> y values always seem to evaluate to "0". The elements look like:
> BTW, I get the circular relationship concept. I think your approach is
> very cool. I'm not dealing w/ circular relationships just yet, but I will
> be soon enough. So, thanks for the code.
> My Best,
> Frank
> On Thu, Jun 7, 2012 at 12:03 PM, Chris Michael <mechr...@googlemail.com>wrote:
>> Hi Frank
>> I don't know if this is a good example or not, but it was something that
>> I also needed to do, and I came up with the following:
>> I sometimes have links that connect a node to itself do some of the code
>> above will probably be superflous for you needs.
>> I am sure there are better ways of doing it, but it did work.
>> Chris
>> On 7 June 2012 03:21, Guerino1 <fgueri...@gmail.com> wrote:
>>> Hi,
>>> Does anyone know where I can find a good example that shows how to add
>>> text to relationship lines in force directed graphs?
>>> I'm building a "Force Directed Radial Graph <http://bl.ocks.org/2879486>"
>>> example to learn about force layouts. I've been able to successfully and
>>> append text to the nodes but I can't seem to get it to work with lines.
>>> When I look at the line in the debugger, it looks as follows...
Ooops, I just checked my app again, and spotted that at the moment, my
second set of text on links are not working (the perils of iterative
development), so for now, it might be worth looking at the first block of
code I sent. That said, I think the second block is close so it might
provide some hints. When I fix it, I shall put it on here.
On 7 June 2012 21:56, Chris Michael <mechr...@googlemail.com> wrote:
> oModules.ConsultationModule.force.on("tick", function ()
> {
> link.attr("points", function (d) { return renderLinks(d)})
> node.attr("x", function (d) { return d.x-25; }).attr("y", function (d) {
> return d.y-10; })
> nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function
> (d) { return d.y; })
> })
> in case you want the entire function it is below, although the lines above
> are the important bit.
> function renderSSM(json)
> {
> try
> {
> data=json
> oModules.ConsultationModule.force.nodes(data.nodes)
> oModules.ConsultationModule.force.links(data.links)
> oModules.ConsultationModule.force.start();
> var vis = oModules.ConsultationModule.vis
> var fill = d3.scale.category20(); //twenty colors
> var link = vis.selectAll("polyline").data(data.links)
> link.enter().append("polyline").attr("class", "link")
> .attr("stroke", "black").style("stroke-width",
> "2").attr("fill","none").attr("points", function (d) { return
> renderLinks(d)})
> var node = vis.selectAll("rect").data(data.nodes)
> node.enter().append("rect")
> .attr("width", function(d) {var w=120; if (d.name.indexOf("?")>-1) w=70;
> return w;}).attr("height", 20)
> .attr("rx", 6).attr("ry", 6).attr("stroke","1")
> .style("fill", function (d) { return fill(d.group); })
> .call(oModules.ConsultationModule.force.drag) ;
> var nodeText = vis.selectAll("text").data(data.nodes)
> nodeText.enter().append("text")
> .text(function(d) {return d.name})
> .call(oModules.ConsultationModule.force.drag)
> oModules.ConsultationModule.doResize()
> oModules.ConsultationModule.force.on("tick", function ()
> {
> link.attr("points", function (d) { return renderLinks(d)})
> node.attr("x", function (d) { return d.x-25; }).attr("y", function (d) {
> return d.y-10; })
> nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function
> (d) { return d.y; })
> });
> }
> On 7 June 2012 21:31, Frank Guerino <fgueri...@gmail.com> wrote:
>> Hi Chris,
>> Thanks for the reply. I appreciate the help.
>> May I ask if you have a gist post that shows the working example?
>> Without it, I tried to follow your code to the best of my ability and
>> applied it to my own "Force Directed Radial Graph<http://bl.ocks.org/2879486>"
>> example. However, I have the problem that the link text is not rendering.
>> When I look at the HTML code, it looks like I'm chaining elements
>> together, properly, (i.e. <line><g><text></text></g></line>) but the x and
>> y values always seem to evaluate to "0". The elements look like:
>> BTW, I get the circular relationship concept. I think your approach is
>> very cool. I'm not dealing w/ circular relationships just yet, but I will
>> be soon enough. So, thanks for the code.
>> My Best,
>> Frank
>> On Thu, Jun 7, 2012 at 12:03 PM, Chris Michael <mechr...@googlemail.com>wrote:
>>> Hi Frank
>>> I don't know if this is a good example or not, but it was something that
>>> I also needed to do, and I came up with the following:
>>> I sometimes have links that connect a node to itself do some of the code
>>> above will probably be superflous for you needs.
>>> I am sure there are better ways of doing it, but it did work.
>>> Chris
>>> On 7 June 2012 03:21, Guerino1 <fgueri...@gmail.com> wrote:
>>>> Hi,
>>>> Does anyone know where I can find a good example that shows how to add
>>>> text to relationship lines in force directed graphs?
>>>> I'm building a "Force Directed Radial Graph<http://bl.ocks.org/2879486>"
>>>> example to learn about force layouts. I've been able to successfully and
>>>> append text to the nodes but I can't seem to get it to work with lines.
>>>> When I look at the line in the debugger, it looks as follows...
I applied your methodology to mine and (at least) I can see the
link/relationship text on the screen. I've now run into another problem
that I can't seem to figure out. The example and the code are located
at "Force
Directed Radial Graph <http://bl.ocks.org/2879486>" (or "
http://bl.ocks.org/2879486").
Interestingly, when I try to calculate the X and Y position of the text,
using the code:
> Ooops, I just checked my app again, and spotted that at the moment, my
> second set of text on links are not working (the perils of iterative
> development), so for now, it might be worth looking at the first block of
> code I sent. That said, I think the second block is close so it might
> provide some hints. When I fix it, I shall put it on here.
> On 7 June 2012 21:56, Chris Michael <mechr...@googlemail.com> wrote:
>> Hi Franki
>> You cannot put a text tag inside a line tag. (Well you can, but it won't
>> render as it isn't valid svg ;-) )
>> oModules.ConsultationModule.force.on("tick", function ()
>> {
>> link.attr("points", function (d) { return renderLinks(d)})
>> node.attr("x", function (d) { return d.x-25; }).attr("y", function (d)
>> { return d.y-10; })
>> nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function
>> (d) { return d.y; })
>> })
>> in case you want the entire function it is below, although the lines
>> above are the important bit.
>> function renderSSM(json)
>> {
>> try
>> {
>> data=json
>> oModules.ConsultationModule.force.nodes(data.nodes)
>> oModules.ConsultationModule.force.links(data.links)
>> oModules.ConsultationModule.force.start();
>> var vis = oModules.ConsultationModule.vis
>> var fill = d3.scale.category20(); //twenty colors
>> var link = vis.selectAll("polyline").data(data.links)
>> link.enter().append("polyline").attr("class", "link")
>> .attr("stroke", "black").style("stroke-width",
>> "2").attr("fill","none").attr("points", function (d) { return
>> renderLinks(d)})
>> var node = vis.selectAll("rect").data(data.nodes)
>> node.enter().append("rect")
>> .attr("width", function(d) {var w=120; if (d.name.indexOf("?")>-1)
>> w=70; return w;}).attr("height", 20)
>> .attr("rx", 6).attr("ry", 6).attr("stroke","1")
>> .style("fill", function (d) { return fill(d.group); })
>> .call(oModules.ConsultationModule.force.drag) ;
>> var nodeText = vis.selectAll("text").data(data.nodes)
>> nodeText.enter().append("text")
>> .text(function(d) {return d.name})
>> .call(oModules.ConsultationModule.force.drag)
>> oModules.ConsultationModule.doResize()
>> oModules.ConsultationModule.force.on("tick", function ()
>> {
>> link.attr("points", function (d) { return renderLinks(d)})
>> node.attr("x", function (d) { return d.x-25; }).attr("y", function (d)
>> { return d.y-10; })
>> nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function
>> (d) { return d.y; })
>> });
>> }
>> On 7 June 2012 21:31, Frank Guerino <fgueri...@gmail.com> wrote:
>>> Hi Chris,
>>> Thanks for the reply. I appreciate the help.
>>> May I ask if you have a gist post that shows the working example?
>>> Without it, I tried to follow your code to the best of my ability and
>>> applied it to my own "Force Directed Radial Graph<http://bl.ocks.org/2879486>"
>>> example. However, I have the problem that the link text is not rendering.
>>> When I look at the HTML code, it looks like I'm chaining elements
>>> together, properly, (i.e. <line><g><text></text></g></line>) but the x and
>>> y values always seem to evaluate to "0". The elements look like:
>>> BTW, I get the circular relationship concept. I think your approach is
>>> very cool. I'm not dealing w/ circular relationships just yet, but I will
>>> be soon enough. So, thanks for the code.
>>> My Best,
>>> Frank
>>> On Thu, Jun 7, 2012 at 12:03 PM, Chris Michael <mechr...@googlemail.com>wrote:
>>>> Hi Frank
>>>> I don't know if this is a good example or not, but it was something
>>>> that I also needed to do, and I came up with the following:
>>>> I sometimes have links that connect a node to itself do some of the
>>>> code above will probably be superflous for you needs.
>>>> I am sure there are better ways of doing it, but it did work.
>>>> Chris
>>>> On 7 June 2012 03:21, Guerino1 <fgueri...@gmail.com> wrote:
>>>>> Hi,
>>>>> Does anyone know where I can find a good example that shows how to add
>>>>> text to relationship lines in force directed graphs?
>>>>> I'm building a "Force Directed Radial Graph<http://bl.ocks.org/2879486>"
>>>>> example to learn about force layouts. I've been able to successfully and
>>>>> append text to the nodes but I can't seem to get it to work with lines.
>>>>> When I look at the line in the debugger, it looks as follows...
This sounds like it a could be a problem with the data binding, I seem to
recall I initially ran into something similar. If you want to post the code
where you do the binding to the links and nodes, I may be able to spot
something.
kr
Chris
On 8 June 2012 04:04, Frank Guerino <fgueri...@gmail.com> wrote:
> I applied your methodology to mine and (at least) I can see the
> link/relationship text on the screen. I've now run into another problem
> that I can't seem to figure out. The example and the code are located at "Force
> Directed Radial Graph <http://bl.ocks.org/2879486>" (or "
> http://bl.ocks.org/2879486").
> Interestingly, when I try to calculate the X and Y position of the text,
> using the code:
> For some reason, when I use .data(force.links()), the links don't seem to
> have the right X and Y data in them for the source and target nodes.
> At the moment, I'm stumped.
> Frank
> On Thu, Jun 7, 2012 at 5:09 PM, Chris Michael <mechr...@googlemail.com>wrote:
>> Ooops, I just checked my app again, and spotted that at the moment, my
>> second set of text on links are not working (the perils of iterative
>> development), so for now, it might be worth looking at the first block of
>> code I sent. That said, I think the second block is close so it might
>> provide some hints. When I fix it, I shall put it on here.
>> On 7 June 2012 21:56, Chris Michael <mechr...@googlemail.com> wrote:
>>> Hi Franki
>>> You cannot put a text tag inside a line tag. (Well you can, but it won't
>>> render as it isn't valid svg ;-) )
>>> oModules.ConsultationModule.force.on("tick", function ()
>>> {
>>> link.attr("points", function (d) { return renderLinks(d)})
>>> node.attr("x", function (d) { return d.x-25; }).attr("y", function (d)
>>> { return d.y-10; })
>>> nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function
>>> (d) { return d.y; })
>>> })
>>> in case you want the entire function it is below, although the lines
>>> above are the important bit.
>>> function renderSSM(json)
>>> {
>>> try
>>> {
>>> data=json
>>> oModules.ConsultationModule.force.nodes(data.nodes)
>>> oModules.ConsultationModule.force.links(data.links)
>>> oModules.ConsultationModule.force.start();
>>> var vis = oModules.ConsultationModule.vis
>>> var fill = d3.scale.category20(); //twenty colors
>>> var link = vis.selectAll("polyline").data(data.links)
>>> link.enter().append("polyline").attr("class", "link")
>>> .attr("stroke", "black").style("stroke-width",
>>> "2").attr("fill","none").attr("points", function (d) { return
>>> renderLinks(d)})
>>> var node = vis.selectAll("rect").data(data.nodes)
>>> node.enter().append("rect")
>>> .attr("width", function(d) {var w=120; if (d.name.indexOf("?")>-1)
>>> w=70; return w;}).attr("height", 20)
>>> .attr("rx", 6).attr("ry", 6).attr("stroke","1")
>>> .style("fill", function (d) { return fill(d.group); })
>>> .call(oModules.ConsultationModule.force.drag) ;
>>> var nodeText = vis.selectAll("text").data(data.nodes)
>>> nodeText.enter().append("text")
>>> .text(function(d) {return d.name})
>>> .call(oModules.ConsultationModule.force.drag)
>>> oModules.ConsultationModule.doResize()
>>> oModules.ConsultationModule.force.on("tick", function ()
>>> {
>>> link.attr("points", function (d) { return renderLinks(d)})
>>> node.attr("x", function (d) { return d.x-25; }).attr("y", function (d)
>>> { return d.y-10; })
>>> nodeText.attr("x", function (d) { return d.x-25; }).attr("y", function
>>> (d) { return d.y; })
>>> });
>>> }
>>> On 7 June 2012 21:31, Frank Guerino <fgueri...@gmail.com> wrote:
>>>> Hi Chris,
>>>> Thanks for the reply. I appreciate the help.
>>>> May I ask if you have a gist post that shows the working example?
>>>> Without it, I tried to follow your code to the best of my ability and
>>>> applied it to my own "Force Directed Radial Graph<http://bl.ocks.org/2879486>"
>>>> example. However, I have the problem that the link text is not rendering.
>>>> When I look at the HTML code, it looks like I'm chaining elements
>>>> together, properly, (i.e. <line><g><text></text></g></line>) but the x and
>>>> y values always seem to evaluate to "0". The elements look like:
>>>> BTW, I get the circular relationship concept. I think your approach is
>>>> very cool. I'm not dealing w/ circular relationships just yet, but I will
>>>> be soon enough. So, thanks for the code.
>>>> My Best,
>>>> Frank
>>>> On Thu, Jun 7, 2012 at 12:03 PM, Chris Michael <mechr...@googlemail.com
>>>> > wrote:
>>>>> Hi Frank
>>>>> I don't know if this is a good example or not, but it was something
>>>>> that I also needed to do, and I came up with the following:
>>>>> I sometimes have links that connect a node to itself do some of the
>>>>> code above will probably be superflous for you needs.
>>>>> I am sure there are better ways of doing it, but it did work.
>>>>> Chris
>>>>> On 7 June 2012 03:21, Guerino1 <fgueri...@gmail.com> wrote:
>>>>>> Hi,
>>>>>> Does anyone know where I can find a good example that shows how to
>>>>>> add text to relationship lines in force directed graphs?
>>>>>> I'm building a "Force Directed Radial Graph<http://bl.ocks.org/2879486>"
>>>>>> example to learn about force layouts. I've been able to successfully and
>>>>>> append text to the nodes but I can't seem to get it to work with lines.
>>>>>> When I look at the line in the debugger, it looks as follows...
The whole file is pretty short and I've pasted the code, below. The
interesting thing is that the binding seems to work fine for drawing the
lines. However, it's as if the source's and/or target's X and Y values
somehow get corrupted after I draw the lines, or (and it's very possible)
I'm incorrectly accessing the data.
> This sounds like it a could be a problem with the data binding, I seem to
> recall I initially ran into something similar. If you want to post the code
> where you do the binding to the links
I think the reason you don't see the x and y values you were expecting is that the linkText position is not being updated in the tick function. Therefore, your text remains stuck in the initial position. Only the link and node selections atributes are being updated. In your code, the link selection refers to the selection of line elements. The lineText elements are not related to those.
Yes, you did wrap the line and text together in a g element. But updating the line element's coordinates in the tick function will not change the position of the text element.
So either update the g element, like you do for the nodes, or keep the text elements completely separate and update it's own coordinates.
As a side note; there are a few parts in your code a bit unclear:
var link = svgCanvas.selectAll(".link") .data(force.links()) .enter().append("g") .attr("class", "gLink") .append("line") .attr("class", "link") .style("stroke", "#ccc")
I guess you meant selectAll(".gLink")?
So after this the data will be bound to the g elements. The append("line") will make the line element a child of the g element. The append method will propagate data from parent to child; this means that the data is also bound to the line elements. Just to be clear, the link variable now refers to the selection of line elements, and not the g elements.
Later you select the g elements and do another data join. However, this is the same data as before so this isn't necessary:
var linkText = svgCanvas.selectAll(".gLink") .data(force.links()) .append("svg:text")
I would say the way you handle node looks cleaner. The node variable refers to the selection of g elements. Then you append a circle to each g element and an anchor element to each g element.
On Friday, June 8, 2012 3:55:03 AM UTC-7, Guerino1 wrote:
> Hi Chris,
> The whole file is pretty short and I've pasted the code, below. The > interesting thing is that the binding seems to work fine for drawing the > lines. However, it's as if the source's and/or target's X and Y values > somehow get corrupted after I draw the lines, or (and it's very possible) > I'm incorrectly accessing the data.
On Fri, Jun 8, 2012 at 10:44 AM, Tore <tore.na...@gmail.com> wrote:
> Hi Frank,
> I think the reason you don't see the x and y values you were expecting is
> that the linkText position is not being updated in the tick function.
> Therefore, your text remains stuck in the initial position. Only the link
> and node selections atributes are being updated. In your code, the link
> selection refers to the selection of line elements. The lineText elements
> are not related to those.
> Yes, you did wrap the line and text together in a g element. But updating
> the line element's coordinates in the tick function will not change the
> position of the text element.
> So either update the g element, like you do for the nodes, or keep the
> text elements completely separate and update it's own coordinates.
> As a side note; there are a few parts in your code a bit unclear:
> var link = svgCanvas.selectAll(".link")
> .data(force.links())
> .enter().append("g")
> .attr("class", "gLink")
> .append("line")
> .attr("class", "link")
> .style("stroke", "#ccc")
> I guess you meant selectAll(".gLink")?
> So after this the data will be bound to the g elements. The append("line")
> will make the line element a child of the g element. The append method will
> propagate data from parent to child; this means that the data is also bound
> to the line elements. Just to be clear, the link variable now refers to the
> selection of line elements, and not the g elements.
> Later you select the g elements and do another data join. However, this is
> the same data as before so this isn't necessary:
> var linkText = svgCanvas.selectAll(".gLink")
> .data(force.links())
> .append("svg:text")
> I would say the way you handle node looks cleaner. The node variable
> refers to the selection of g elements. Then you append a circle to each g
> element and an anchor element to each g element.
> Tore
> On Friday, June 8, 2012 3:55:03 AM UTC-7, Guerino1 wrote:
>> Hi Chris,
>> The whole file is pretty short and I've pasted the code, below. The
>> interesting thing is that the binding seems to work fine for drawing the
>> lines. However, it's as if the source's and/or target's X and Y values
>> somehow get corrupted after I draw the lines, or (and it's very possible)
>> I'm incorrectly accessing the data.
> Aside from the Chrome mouseover issue, it seems to be working.
> Does anyone have any ideas on how to possibly get the relationship text
> (i.e. "linkText") to follow the angle of the line?
> Thanks, again, for all the help.
> Frank
> On Fri, Jun 8, 2012 at 10:44 AM, Tore <tore.na...@gmail.com> wrote:
>> Hi Frank,
>> I think the reason you don't see the x and y values you were expecting is
>> that the linkText position is not being updated in the tick function.
>> Therefore, your text remains stuck in the initial position. Only the link
>> and node selections atributes are being updated. In your code, the link
>> selection refers to the selection of line elements. The lineText elements
>> are not related to those.
>> Yes, you did wrap the line and text together in a g element. But updating
>> the line element's coordinates in the tick function will not change the
>> position of the text element.
>> So either update the g element, like you do for the nodes, or keep the
>> text elements completely separate and update it's own coordinates.
>> As a side note; there are a few parts in your code a bit unclear:
>> var link = svgCanvas.selectAll(".link")
>> .data(force.links())
>> .enter().append("g")
>> .attr("class", "gLink")
>> .append("line")
>> .attr("class", "link")
>> .style("stroke", "#ccc")
>> I guess you meant selectAll(".gLink")?
>> So after this the data will be bound to the g elements. The
>> append("line") will make the line element a child of the g element. The
>> append method will propagate data from parent to child; this means that the
>> data is also bound to the line elements. Just to be clear, the link
>> variable now refers to the selection of line elements, and not the g
>> elements.
>> Later you select the g elements and do another data join. However, this
>> is the same data as before so this isn't necessary:
>> var linkText = svgCanvas.selectAll(".gLink")
>> .data(force.links())
>> .append("svg:text")
>> I would say the way you handle node looks cleaner. The node variable
>> refers to the selection of g elements. Then you append a circle to each g
>> element and an anchor element to each g element.
>> Tore
>> On Friday, June 8, 2012 3:55:03 AM UTC-7, Guerino1 wrote:
>>> Hi Chris,
>>> The whole file is pretty short and I've pasted the code, below. The
>>> interesting thing is that the binding seems to work fine for drawing the
>>> lines. However, it's as if the source's and/or target's X and Y values
>>> somehow get corrupted after I draw the lines, or (and it's very possible)
>>> I'm incorrectly accessing the data.
> Aside from the Chrome mouseover issue, it seems to be working.
> Does anyone have any ideas on how to possibly get the relationship text > (i.e. "linkText") to follow the angle of the line?
> Thanks, again, for all the help.
> Frank
> On Fri, Jun 8, 2012 at 10:44 AM, Tore <tore.na...@gmail.com> wrote:
>> Hi Frank,
>> I think the reason you don't see the x and y values you were expecting is >> that the linkText position is not being updated in the tick function. >> Therefore, your text remains stuck in the initial position. Only the link >> and node selections atributes are being updated. In your code, the link >> selection refers to the selection of line elements. The lineText elements >> are not related to those.
>> Yes, you did wrap the line and text together in a g element. But updating >> the line element's coordinates in the tick function will not change the >> position of the text element.
>> So either update the g element, like you do for the nodes, or keep the >> text elements completely separate and update it's own coordinates.
>> As a side note; there are a few parts in your code a bit unclear:
>> var link = svgCanvas.selectAll(".link") >> .data(force.links()) >> .enter().append("g") >> .attr("class", "gLink") >> .append("line") >> .attr("class", "link") >> .style("stroke", "#ccc")
>> I guess you meant selectAll(".gLink")?
>> So after this the data will be bound to the g elements. The >> append("line") will make the line element a child of the g element. The >> append method will propagate data from parent to child; this means that the >> data is also bound to the line elements. Just to be clear, the link >> variable now refers to the selection of line elements, and not the g >> elements.
>> Later you select the g elements and do another data join. However, this >> is the same data as before so this isn't necessary:
>> var linkText = svgCanvas.selectAll(".gLink") >> .data(force.links()) >> .append("svg:text")
>> I would say the way you handle node looks cleaner. The node variable >> refers to the selection of g elements. Then you append a circle to each g >> element and an anchor element to each g element.
>> Tore
>> On Friday, June 8, 2012 3:55:03 AM UTC-7, Guerino1 wrote:
>>> Hi Chris,
>>> The whole file is pretty short and I've pasted the code, below. The >>> interesting thing is that the binding seems to work fine for drawing the >>> lines. However, it's as if the source's and/or target's X and Y values >>> somehow get corrupted after I draw the lines, or (and it's very possible) >>> I'm incorrectly accessing the data.
On Sat, Jun 9, 2012 at 10:57 AM, Tore <tore.na...@gmail.com> wrote:
> The font-size interpolation issue in Chrome doesn't seem to occur when the
> size is specified in px instead of em.
> On Saturday, June 9, 2012 7:27:54 AM UTC-7, Guerino1 wrote:
>> Aside from the Chrome mouseover issue, it seems to be working.
>> Does anyone have any ideas on how to possibly get the relationship text
>> (i.e. "linkText") to follow the angle of the line?
>> Thanks, again, for all the help.
>> Frank
>> On Fri, Jun 8, 2012 at 10:44 AM, Tore <tore.na...@gmail.com> wrote:
>>> Hi Frank,
>>> I think the reason you don't see the x and y values you were expecting
>>> is that the linkText position is not being updated in the tick function.
>>> Therefore, your text remains stuck in the initial position. Only the link
>>> and node selections atributes are being updated. In your code, the link
>>> selection refers to the selection of line elements. The lineText elements
>>> are not related to those.
>>> Yes, you did wrap the line and text together in a g element. But
>>> updating the line element's coordinates in the tick function will not
>>> change the position of the text element.
>>> So either update the g element, like you do for the nodes, or keep the
>>> text elements completely separate and update it's own coordinates.
>>> As a side note; there are a few parts in your code a bit unclear:
>>> var link = svgCanvas.selectAll(".link")
>>> .data(force.links())
>>> .enter().append("g")
>>> .attr("class", "gLink")
>>> .append("line")
>>> .attr("class", "link")
>>> .style("stroke", "#ccc")
>>> I guess you meant selectAll(".gLink")?
>>> So after this the data will be bound to the g elements. The
>>> append("line") will make the line element a child of the g element. The
>>> append method will propagate data from parent to child; this means that the
>>> data is also bound to the line elements. Just to be clear, the link
>>> variable now refers to the selection of line elements, and not the g
>>> elements.
>>> Later you select the g elements and do another data join. However, this
>>> is the same data as before so this isn't necessary:
>>> var linkText = svgCanvas.selectAll(".gLink")
>>> .data(force.links())
>>> .append("svg:text")
>>> I would say the way you handle node looks cleaner. The node variable
>>> refers to the selection of g elements. Then you append a circle to each g
>>> element and an anchor element to each g element.
>>> Tore
>>> On Friday, June 8, 2012 3:55:03 AM UTC-7, Guerino1 wrote:
>>>> Hi Chris,
>>>> The whole file is pretty short and I've pasted the code, below. The
>>>> interesting thing is that the binding seems to work fine for drawing the
>>>> lines. However, it's as if the source's and/or target's X and Y values
>>>> somehow get corrupted after I draw the lines, or (and it's very possible)
>>>> I'm incorrectly accessing the data.
