rstudio / r2d3

R Interface to D3 Visualizations
https://rstudio.github.io/r2d3
Other
518 stars 103 forks source link

D3 preview in RStudio does not render imported SVG #90

Open mbacou opened 3 years ago

mbacou commented 3 years ago

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