Converting D3 chart to work with r2d3

shiny
1

I'm trying to convert a working D3 chart to work with r2d3 in shiny/rmarkdown.

I think the issue is that the chart is setup with the following HTML container:

<svg width="1000" height="500">
  <g class="chart">
    <g class="bar"></g>
  </g>
</svg>

With the js script using code like d3.select(".bar") to build build the chart.

So is there a way to tell r2d3 to use this container for the chart? Or would I have to append the <g> elements to the standard svg container created by r2d3 in the js script?

Thanks.

2

From the r2d3 docs:

When you are learning D3 or translating D3 examples for use with R it’s important to keep in mind that D3 examples will generally include code to load data, create an SVG or other root element, and establish a width and height for the visualization.
On the other hand with r2d3 , these variables are provided automatically so do not need to be created.

For full explanation see r2d3 - D3 Variables.

So,. it sounds like creating that container would be redundant.

3

Edit / additional info you can specify an alternate container using the "container" parameter." (See here). However, it looks like that's for if you want to use a div and not an svg.

4

Thanks Mara. I think I worked it out.

I can append the <g> elements I need to the default <svg> container created by r2d3 in my js script with:

svg
  .append("g")
  .attr("class", "chart")
  .append("g")
  .attr("class", "bar")

Then the rest of the js code that was looking for <g> tags with class "bar" starts to work.

The long and painful journey of learning D3 has begun...

4 Likes