Open mbacou opened 3 years ago
I have an external SVG file circle.svg that I want to manipulate with D3.js:
circle.svg
<?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
I have an external SVG file
circle.svg
that I want to manipulate with D3.js:The following code chunks work as expected in Rmarkdown (once the document is rendered), but I cannot preview anything in the D3 editor:
// !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); };
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