Problem embedding d3 as div

support
1

I recently made a post with a simple embedded d3.js chart. The simplest way to do this, as I understood it, was creating a div tag with an id, and using the d3.select("div#chart).append(“svg”) to embed the code. I also loaded the d3 library from its remote storage with a script tag inside the div. I understand this isn’t ideal, but I don’t think that was the cause of the subsequent problem.

When I added a new div, with a new id, it displayed correctly on my localhost. When I uploaded it to my site, however, the two charts were placed on top of each other. I could see no obvious reason why this would happen. I’ve recently disabled baseURL so my footnotes will work, but I didn’t see any reason that would cause the problem. The csv data files were still being found, etc.

Also, the current version of the post only displays one chart, as I deleted the other when I couldn’t get it working.

2

This was an issue with me reusing variable names and not the placement of the divs. I don’t know why it was displaying correctly on local host, however. Perhaps some type of caching.

3

I am new to hugo and am trying to accomplish what I think is a similar task but can’t seem to figure out how to get hugo to output a div with an id - I tried using a shortcode … and it compiles/builds but when I …

{{< viz class="ihaveclass" >}}

shortcode …

<div class="{{ if .Get "class" }}{{ .Get "class" }}{{ else }}defaultclass{{ end }}">
  {{ .Inner }}
</div>

no div.

Pretty sure there is something fundamental I’m missing - but can you provide a small sample

4

I created the divs manually in html blocks in the original post. No shortcodes were involved, so I can’t offer any help here.

5

There are syntax errors with the way you use if and {{ .Get "class" }}

Something like this should work for you.

< div class=“{{ if (.Get “class”) }}{{ with .Get “class”}}{{.}} {{ end }}{{ else }}defaultclass{{ end }}”

6

Can’t you get rid of the surrounding if statement and just use with since it’s more terse and tasteful?

1 Like
7

You’re right. It’s superfluous.

1 Like
8

This actually was just an issue with my being completely new to hugo and my custom layout was defined using

{{ define "main" }}
  {{ .Content}}
{{ end }}

instead of just

{{ .Content}}

I must have copy/pasted the layout from somewhere else as I have no theme and am using the victor-hugo boilerplate https://github.com/netlify/victor-hugo