使用D3js遍歷一組圖像

Question

我剛剛開始研究D3js，現在開始關注SVG的工作原理。 我不是設計師，如果可以使用一個簡單的原型，我希望讓一些設計團隊加入d3js。

我想要的是一個圖像列表，這些圖像是我的數據集，然后在該圖像集中的第一個圖像中淡出，然后在5秒后將其淡出，然后在下一個圖像中淡出。 這將繼續遍歷該集合。

如果您可以指向我一些鏈接或提供一些簡單的代碼來開始我的旅程，那就太好了。

Answer 1

d3的基本功能與HTML以及SVG一樣都可以正常工作。 還有一些特定於svg的附加功能，但是所有這些功能的名稱都帶有svg，例如用於繪制圖表軸的d3.svg.axis 。 但是，核心概念適用於所有元素，即您可以創建與數據集匹配的元素。

因此，是的，您可以僅使用HTML <img>元素創建一個簡單的d3示例。 您將要創建一個數據集，該數據集是一個Javascript數組，其中每個要創建的圖像在數組中都有一個條目。

舉一個簡單的例子，假設您的服務器返回了一個由對象數組組成的JSON文件。 每個對象都有兩個屬性，圖像URL和標題文本。 現在，您可以使用d3的文件讀取方法來讀取和解析JSON文件，或者您可以使用最喜歡的任何一種方法對其進行解析。 無論如何，最終效果應該與您像這樣對它進行硬編碼時大致相同：

var dataArray = [{url:"image1.jpeg", title:"First image"},
                 {url:"image2.png", title:"Second image"},
                 {url:"image3.png", title:"Third image"}];

然后，聲明一個要放入<img>元素的空d3選擇，並使用d3的data-join方法創建匹配的元素。 你這樣做

1. 使用d3選擇父元素（您希望所有圖像成為其子元素）；
2. 使用CSS選擇器為子元素創建一個selectAll選擇，該選擇器將特定於您要創建的元素；
3. 將所選內容連接到數據數組，這將告訴d3您要為數據數組中的每個條目選擇一個元素；
4. 使用數據綁定選擇的enter()方法訪問占位符條目，以獲取沒有匹配元素的數據值，並創建它們；
5. 再次使用主選擇來基於附加到每個圖像元素的數據設置圖像元素的所有屬性

樣例代碼：

var slides = d3.select("div.slideshowContainer") //1. select parent
      .selectAll("img") //2. select children (all images in the div, none to start)
      .data( dataArray ); //3. bind to the array

slides.enter() //4. access the placeholders
      .append( "img" ) 
       //create an <img> as a child of the parent div, one for each placeholder
      .attr( "class", "slide" ); 
       //set classes and any other attributes that won't change

slides.attr("src", function(d){ return d.url;})
      .attr("title", function(d){ return d.title;});
      //set attributes based on the data object bound to each element
      //when you give a function as the value of an attr() call,
      //d3 will call it with the data object as the first parameter

為了獲得簡單的幻燈片放映效果，您想使用d3過渡隨着時間的推移更改幻燈片的可見性：

slides.attr("opacity", 0) //start invisible
      .transition().duration(1000) //schedule a transition to last 1000ms
      .delay(function(d,i){return i*2000;})
        //Delay the transition of each element according to its index
        // in your selection so that it won't start to appear
        // until one second after the last image reached full opacity.
        //The second parameter passed to any function you give to d3 
        // is usually the index of that element within the current selection.
      .attr("opacity", 1); 
        //set the end-value of the transition to full opacity

單獨地，上面的代碼將創建一系列並排顯示的圖像，您需要調整CSS，以使它們在容器內完全相對放置。

這是對一些非常主要的d3概念的快速了解。 逐步學習教程以獲取更多經驗。

大多數教程示例都使用SVG，盡管“讓我們制作條形圖”中的初始示例使用彩色的<div>元素作為條形，並且還有另外兩個示例。 但是，所有示例都可能有用：僅嘗試着重於如何創建元素以及如何設置屬性，樣式和文本內容，而不必擔心SVG屬性和元素類型如何與圖形功能相關聯。