Question

我刚刚开始关注D3js，现在我正在了解SVG的工作原理。我不是设计师，如果我得到一个简单的原型工作，我想让一些设计团队进入d3js。

我想要的是有一个图像列表，这些图像是我的数据集，然后从集合中淡入第一个图像，然后5秒后将其淡出然后淡入下一个图像。这将继续在集合中循环。

如果你能指点我一些链接或提供一些简单的代码让我开始我的旅程，那就太棒了。

Answer 1

d3的基本功能与HTML一样适用于SVG。还有一些特定于svg的额外函数，但这些函数在其名称中都有svg，如d3.svg.axis用于绘制图表轴。但是，核心概念适用于所有元素，您可以创建与数据集匹配的元素。

所以，是的，您可以使用HTML <img>元素创建一个简单的d3示例。您可能希望创建一个Javascript数组，该数组在阵列中有一个条目，用于您要创建的每个图像。

作为一个简单示例，假设您的服务器已返回包含对象数组的JSON文件。每个对象都有两个属性，即图像URL和标题文本。现在，您可以使用d3's file reading method来读取和解析JSON文件，或者您可以使用最适合的方法解析它。无论如何，最终效果应该与您对此进行硬编码的方式大致相同：

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

然后声明要将<img>元素放入其中的空d3选择，并使用d3的数据连接方法创建匹配元素。你可以通过

来做到这一点

使用d3选择父元素（您希望所有图像都是子元素）;
使用CSS选择器为子元素创建selectAll选择，该选择器将特定于您要创建的元素;
将此选择连接到数据数组，告诉d3您希望在数据数组中为每个条目选择一个元素;
使用数据绑定选择的enter()方法访问不具有要匹配的元素的数据值的占位符条目，并创建它们;
再次使用主选项根据附加到每个

示例代码：

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概念的快速通道。通过the tutorials努力获得更多经验。

大多数教程示例都使用SVG，尽管最初的例子是＆＃34;让我们制作一个条形图＆＃34;使用彩色<div>元素作为条形图，还有其他几个例子。但是，所有示例都很有用：只需关注如何创建元素以及如何设置属性，样式和文本内容，而不必担心SVG属性和元素类型如何与图形功能相关。

使用D3js循环一组图像

1 个答案: