這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

Wp-D3

外掛說明

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.
Enjoy!.

螢幕擷圖

  • 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.

使用者評論

2016 年 9 月 3 日
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 訂閱開發記錄

變更記錄

2.4.1

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

2.4

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

2.3.1

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

2.3

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

2.2

  • 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

2.1.2

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

2.1.1

  • 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

2.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.

1.2.2

  • 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

1.2.1

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

1.2

  • 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).

1.1

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

1.0.0

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