We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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
The text was updated successfully, but these errors were encountered:
No branches or pull requests
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:
Thanks!
The text was updated successfully, but these errors were encountered: