Parsing JSON with a javascript variable (for use as a D3 data source)

[Trent Shields]

Hi Guys,

I am relatively new to d3, so sorry if this question or my code is cringe-worthy. I'm currently working with a repository that outputs to a large XML file. Using XSL I am able to query this xml file and using a xsl template build a json structure:

Example:

<xsl:template name="PrintActorTreeDataNamed">

<xsl:param name="parentNode" />

<xsl:param name="inScopeActors" />

<xsl:param name="level" />

<xsl:variable name="parentName" select="$parentNode/own_slot_value[slot_reference='name']/value" />

<xsl:text>{id: "</xsl:text>

<xsl:value-of select="$parentNode/name" />

<xsl:text>",name: "</xsl:text>

<xsl:value-of select="$parentName" />

<xsl:text>",data:{}, children:[</xsl:text>

<xsl:if test="$level &lt; 5">

<xsl:variable name="childActors" select="$inScopeActors[name = $parentNode/own_slot_value[slot_reference='contained_sub_actors']/value]" as="node()*" />

<xsl:for-each select="$childActors">

<xsl:call-template name="PrintActorTreeDataNamed">

<xsl:with-param name="parentNode" select="current()" />

<xsl:with-param name="inScopeActors" select="$inScopeActors" />

<xsl:with-param name="level" select="$level + 1" />

</xsl:call-template>

<xsl:choose>

<xsl:when test="position() != count($childActors)">

<xsl:text>, </xsl:text>

</xsl:when>

</xsl:choose>

</xsl:for-each>

</xsl:if>

<xsl:text>]}</xsl:text>

</xsl:template>

I then call this template into an XSL variable:

<xsl:variable name="tryThisTemplate">

 

 <xsl:call-template name="PrintActorTreeDataNamed"><xsl:with-param name="parentNode" select="$parentActor" /><xsl:with-param name="inScopeActors" select="$inScopeActors" /><xsl:with-param name="level" select="1" /></xsl:call-template>

</xsl:variable>

I pull this variable into a javascript variable:

 var datatest = '<xsl:value-of select="$tryThisTemplate" />'

and try and use it as a data source (for a tree diagram) with the following code:

json = JSON.parse( $datatest );) {

  json.x0 = 800;

  json.y0 = 0;

  update(root = json);

}); 

However, it does not appear to work. A print to screen of the javascript variable shows correct json formatting.

As the page is dynamic every time it is loaded, and we are restricted to using xml, is there any way for me to use a javascript variable as the source for a d3 diagram?

Any help is greatly appreciated!
Thanks,
Trent.

[Phuoc Do]

Yes, you can use any javascript variable as the data source. In fact, d3.json or d3.csv passes in data variable into the callback:

d3.json('file.json', function(data) {

  // drawing code

  // data is loaded from file.json

});

If you already have your data available, you can use it directly. Make sure your make data in format that is compatible with drawing code.

var data = json;

// drawing code

Phuoc Do

vida.io