Error In r2d3 attrs function

General
1

I was trying to build the basic barchart just to see if I can do it via r2d3.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
        .attrs({
            width: 500,
            height: 500
        })

    svg.append("rect")
      .attrs({
        width: 317,
        height: 100,
        x: 200,
        y: 62,
        fill: "#3BA360"})
    
    svg.append("text")
      .text("attrs provided by d3-selection-multi")
      .attrs({y: 200,
              x: 120})
      .style("font-size", 20)
      .style("font-family", "monospace")    
    
  </script>
</body>

This is the kind of code I want to write. But somehow I think r2d3 doesn't recognize the attrs command. it gives me this error when I try to do that.

Error: undefined is not a constructor (evaluating 'svg.selectAll('rect') .data(data)
.enter().append('rect')
.attrs')

I want to add d3-select-multi library in the code But I don't know how to do it. I couldn't find it in docs. I even Tried.

r2d3(data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
     ,script = "d3.js"
     ,dependencies = "https://d3js.org/d3-selection-multi.v1.min.js")

Please help me out because I think writing multiple attr statement one after another is not how you should write your code ever.

I am still trying to learn d3. Because I want to access the library so I may have some pitfall in the logic. Please be candid in letting me know if I am dead wrong. :slight_smile:

2

Your dependencies points to a website, while all the examples point to local files. Have you tried downloading 'd3-selection-multi.v1.min.js' and putting it in the project folder?

https://rstudio.github.io/r2d3/articles/dependencies.html

1 Like
3

Thanks a lot for pointing the flaw in the logic.

it worked like a charm. The trick was to save it in local file and then call it.

r2d3(data=c(30, 26, 0.8, 0.95, 0.40, 0.20)
     ,script = "d3.js"
     ,dependencies = 'd3-selection-multi.v1.min.js')

This is the code I used.Now i can start to learn D3. I got stuck on the initial chapters.

Thank you so so much for replying. Your reply made my day. :slight_smile:

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.