Цей плагін не перевірявся з останніми 3-ма основними випусками WordPress. Можливо, він більше не може розроблятися або підтримуватися, і він може мати проблеми сумісності при використанні з більш новими версіями WordPress.



D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Ths plugin provides the current last version of D3 (v3.3) and a javascript editor to add javascript code into your post or pages and render it.
All extra .css or .js files can be uploaded to your WordPress blog and then included into the post/page easily using built-in functions.


  • Live example here
  • Wp-D3 Chart Manager to edit and save multiple charts code.
  • URL Include dialog to provide the URLs of extra style (.css) and javascript (.js) files used in the D3 snippets.
  • Example displaying D3 chart taking from bl.ocks.org, in figurebelow.com


  1. Upload wp-d3/ to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Create a post in Visual Mode. The last toobar icon is a shortcut to the Wp-D3 Manager Editor.
  4. Paste your code into the editor.
  5. If you have any extra dependencies to .js or .css files upload them to your WordPress
    installation using the WordPress Media Library and then add their URL to the list of includes that
    appears when Wp-D3 Chart Manager’s ‘Include’ button is pressed.
  6. In your D3 code, make sure that the chart is attached to a div with the same name as the current edition tab.
  7. Press ‘Insert’ to add a shortcode into the current post with the chart reference.
  8. Press ‘Save’.
  9. Preview your post and have fun!.

Часті питання

  1. Is it possible to execute javascript code different than D3 one?
    Technically you can use any .js file in your code if you upload it to the WordPress’ Media Library and then copy its URL to the Wp-D3 “Includes” dialog.
    This plugin is designed with D3 in mind so any extra charting libs are not guaranteed to work.
  2. What about including remote javascript files (i.e. hosted in another server)?
    Browsers don’t allow the reference of javascript code hosted in a machine different of the localhost due to security concerns so this is not a limitation of the Wp-D3 plugin itself.


Simply awesome. Thank you so much Ruben for making the plug-in. Can't illustrate how much this has helped us out! As users have pointed out, go to D3 for dummmies and read user "p_ebox" instruction on how to get it up and running. Thanks again.
Прочитати всі 12 відгуків

Учасники та розробники

“Wp-D3” — проект з відкритим вихідним кодом. В розвиток плагіну внесли свій вклад наступні учасники:


Перекладіть “Wp-D3” на вашу мову.

Цікавитесь розробкою?

Перегляньте код, перегляньте сховище SVN або підпишіться на журнал розробки за допомогою RSS.

Журнал змін


  • Security fix release to prevent CSRF attacks to the plugin functionality.
  • D3.js library updated to latest v4.3.


  • Updated D3 library to D3 v4.22.
  • Added a settings option to switch between D3v3.5 and D3v4.2
  • Minor code cleaning around.


  • Fixed a bug introduced in 2.2 that broke paragraph (\<p>) tags when two of them were consecutive.


  • Fixed a bug that enabled ‘wpautop’ and ‘wptexturize’ plugins.
  • Updated D3 library to D3 v3.5.16
  • Validated up to WordPress v4.5


  • Added Preview button to the Wp-D3 editor.
  • Fixed bug that made generated code not to be valid when the chart contains “p” (HTML paragraph) hardcoded strings.
  • Updated D3 library to D3 v3.5.5
  • Validated up to WordPress v4.1


  • Removed nasty bug that made charts overlap when multiple charts had same javascript variables.


  • Added WPD3_CHART_ID feature: the constant WPD3_CHART_ID can be used instead of the chart title and the
    plugin will generate an ID automatically.
  • Updated D3.js to version 3.4.13
  • Updated ACE editor to version 1.1.7
  • Validation of the Wp-D3 plugin with WordPress 4.0


  • New interface added to edit and save D3 code without interfering with post content by means of a
  • javascript editor providing syntax highlightning, syntax error warnings and tab indentation.


  • Fixed plugin initialization bug that generated a wrong js script include.
  • The [d3-link] tag is now optional and can be skipped if nothing needs to be included.
  • The shipped d3.js version has been updated to D3 v3.3.10


  • Implemented workaround to keep ‘&’ symbols inside javascript code without unicode conversion.


  • Fixed bug that provoked wpautop and wptexturize to be disabled permanently.
  • Fixed d3-link include’s generation.
  • Added filter to avoid wptexturize messing the [d3-source] content.
  • Updated D3 shipped version to last 3.3.3
  • The plugin now uses the lighter d3.v3.min.js (instead of d3.v3.js).


  • Fixed d3 snippet insertion, now the code output is shown where it has been inserted inside the post.


  • First commit. Basic tag functionality, [d3-link], [d3 canvas=”canvas”]