r2d3
r2d3 copied to clipboard
rstudio
D3 preview in RStudio does not render imported SVG
I have an external SVG file circle.svg that I want to manipulate with D3.js:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 161.4 39" style="enable-background:new 0 0 161.4 39;" xml:space="preserve">
<style type="text/css">
.st0{fill:#C69C6D;stroke:#C69C6D;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#000000;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#C1272D;stroke:#006837;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{stroke:#C69C6D;stroke-miterlimit:10;}
.st4{fill:#009245;stroke:#006837;stroke-miterlimit:10;}
.st5{fill:#FFFFFF;stroke:#C69C6D;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{fill:#0000FF;}
</style>
<g id="anno_x5F_rect">
<path class="st0" d="M141.9,37.5H19.5c-9.9,0-18-8.1-18-18v0c0-9.9,8.1-18,18-18h122.4c9.9,0,18,8.1,18,18v0
C159.9,29.4,151.8,37.5,141.9,37.5z"/>
<line class="st1" x1="19.5" y1="1.5" x2="19.5" y2="37"/>
<line class="st1" x1="141.4" y1="1.5" x2="141.4" y2="37.5"/>
<circle class="st2" cx="10.6" cy="19.1" r="5.2"/>
<circle class="st3" cx="151.1" cy="19.2" r="6.7"/>
<circle class="st4" cx="151.1" cy="19.2" r="5.7"/>
<rect x="18.8" y="1.5" class="st5" width="122.6" height="36"/>
</g>
<g id="anno_x5F_text">
</g>
<g id="location_x5F_dot">
<circle class="st6" cx="151.1" cy="19.2" r="5.7"/>
</g>
</svg>
The following code chunks work as expected in Rmarkdown (once the document is rendered), but I cannot preview anything in the D3 editor:
```{r, results="asis"}
# Import D3
htmltools::tags$script(src="https://d3js.org/d3.v6.min.js")
```
::: {#example}
:::
```{js}
const hw = $("#example").width();
var div = d3.select("#example");
var svg = div
.append("svg")
.attr("viewBox", [0, 0, hw, hw*0.8])
.insert("svg:g");
// Append external design
d3.xml("circle.svg")
.then(d => {
svg.node().append(d.documentElement);
```
// !preview r2d3 data=c(0.3, 0.6, 0.8, 0.95, 0.40, 0.20)
//
// r2d3: https://rstudio.github.io/r2d3
//
var svg = svg
.insert("svg:g");
// Append external design
d3.xml("circle.svg")
.then(d => {
svg.node().append(d.documentElement);
};
Thanks!
R version 3.6.3 (2020-02-29)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 20.04.3 LTS
Matrix products: default
BLAS: /usr/lib/x86_64-linux-gnu/openblas-pthread/libblas.so.3
LAPACK: /usr/lib/x86_64-linux-gnu/openblas-pthread/liblapack.so.3
locale:
[1] LC_CTYPE=en_US.UTF-8 LC_NUMERIC=C LC_TIME=en_US.UTF-8
[4] LC_COLLATE=en_US.UTF-8 LC_MONETARY=en_US.UTF-8 LC_MESSAGES=en_US.UTF-8
[7] LC_PAPER=en_US.UTF-8 LC_NAME=C LC_ADDRESS=C
[10] LC_TELEPHONE=C LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] ggplot2_3.3.5 lattice_0.20-45 stringr_1.4.0 scales_1.1.1 jsonlite_1.7.2
[6] knitr_1.36 tmap_3.3-3 data.table_1.14.2 raster_3.4-13 sp_1.4-5
loaded via a namespace (and not attached):
[1] Rcpp_1.0.7 png_0.1-7 class_7.3-19 digest_0.6.28 utf8_1.2.2
[6] R6_2.5.1 evaluate_0.14 e1071_1.7-9 highr_0.9 pillar_1.6.3
[11] rlang_0.4.11 rstudioapi_0.13 rmarkdown_2.11 labeling_0.4.2 textshaping_0.3.5
[16] htmlwidgets_1.5.4 munsell_0.5.0 proxy_0.4-26 compiler_3.6.3 xfun_0.26
[21] systemfonts_1.0.2 pkgconfig_2.0.3 tmaptools_3.1-1 base64enc_0.1-3 htmltools_0.5.2
[26] downlit_0.2.1 tidyselect_1.1.1 tibble_3.1.5 codetools_0.2-18 XML_3.99-0.3
[31] fansi_0.5.0 viridisLite_0.4.0 withr_2.4.2 crayon_1.4.1 dplyr_1.0.7
[36] sf_1.0-2 grid_3.6.3 gtable_0.3.0 lwgeom_0.2-7 lifecycle_1.0.1
[41] DBI_1.1.1 magrittr_2.0.1 units_0.7-2 KernSmooth_2.23-20 stringi_1.7.5
[46] farver_2.1.0 leafsync_0.1.0 leaflet_2.0.4.1 ragg_1.1.3 ellipsis_0.3.2
[51] generics_0.1.0 vctrs_0.3.8 distill_1.2 RColorBrewer_1.1-2 tools_3.6.3
[56] dichromat_2.0-0 leafem_0.1.6 glue_1.4.2 purrr_0.3.4 crosstalk_1.1.1
[61] abind_1.4-5 parallel_3.6.3 fastmap_1.1.0 yaml_2.2.1 colorspace_2.0-2
[66] stars_0.5-4 classInt_0.4-3
