Question

我是javascript的新手，我尝试使用一行显示1来显示动画（使用.transition().duration(1000)）。

不幸的是，我无法得到这个结果。 .duration(1000)似乎不适用于画线。

我的摘要

svg.append("path")
            .data([data])
            .transition().duration(1000)
            .attr("class", "line")
            .attr("d", valueline(xy));

如果我输入.transition().duration(1000).style("color", "red)，则字体在1秒内变为红色。

我的问题：为什么持续时间适用于颜色而不是线条画？

如果你能帮助我，我将非常感激！

我需要我的整个代码，我在那里：

//VOLCAN FUNCTION
function draw_volcan(url){
    d3.select("svg").remove() // remove the old graph

    // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    d3.json(url, function(error, data) { //chargement des data volcans
        if(error) throw ('There was an error while getting geoData: '+error);
        //get in an array the occurance of eruptions
        var volcans_incidence_annee_2018 = new Array(59).fill(0) // on prépare une array avec pour le nombre d'éruptions de volcan par année
        data.forEach(function(d) {
            var single_date_index = d.Date-1960     //année-1960 = index où il faudra ajouter 1 pour l'occurence de l'année
            volcans_incidence_annee_2018[single_date_index] += 1 //ajoute 1 d'occurance à l'année souhaitée
            });
        var volcans_incidence_annee = new Array(56).fill(0)

        for(i in volcans_incidence_annee_2018){ //créé un array volcans_incidence_annee qui contient les données de 1960 à 2015 uniquement
            if(i<56){
                volcans_incidence_annee[i] = volcans_incidence_annee_2018[i]
            };
        };

        var year_array = []
        for(var i = 1960; i<=2015; i++) {year_array.push(i);} //créé un array avec chaque année

        //create array with all the points
        var xy=[];
        for(var i = 0; i < year_array.length; i++ ) {
            xy.push({x: year_array[i], y: volcans_incidence_annee[i]});
        };

        // set the ranges
        var x = d3.scaleLinear().domain([1960, 2015]).range([0, width]);
        var y = d3.scaleLinear().domain([Math.min(...volcans_incidence_annee), Math.max(...volcans_incidence_annee)]).range([height, 0]);

        // create a line function that can convert data[] into x and y points
        var valueline = d3.line()
            .x(function(d) { return x(d.x);})
            .y(function(d) { return y(d.y);});


        // append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#graph_draw").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

        // Add the valueline path.
        svg.append("path")
            .data([data])
            .transition().duration(1000)
            .attr("class", "line")
            .attr("d", valueline(xy));

        // Add the X Axis
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        // Add the Y Axis
        svg.append("g")
            .call(d3.axisLeft(y));
        //svg.append("g").attr("d", line(+volcans_incidence_annee));
    });

Answer 1

在D3中，转换将DOM元素从初始状态 source 状态更改为最终状态 target 状态。

使用selection.transition创建转换之前的所有内容都属于初始状态，并且其后的所有内容都属于所需（目标）状态。

也就是说，问题中的问题非常简单：您无法插入类的创建或d属性的定义。作为Bostock（D3创作者）once said：

修改DOM时，对任何无法插补的更改使用选择;仅使用过渡动画。例如，不可能插入元素的创建：它既存在又不存在。

我们可以在下面的演示中清楚地看到这一点。

没有任何意义从没有d属性转变为拥有一个属性：

var d = "M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z";

var d2 = "M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z";

var svg = d3.select("svg");

var path = svg.append("path")
  .style("fill", "#f48023")
  .transition()
  .duration(1000)
  .attr("d", d)

var path2 = svg.append("path")
  .style("fill", "#bcbbbb")
  .transition()
  .duration(1000)
  .attr("d", d2)

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

但是，我们可以从0不透明度转换为1：

var d = "M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z";

var d2 = "M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z";

var svg = d3.select("svg");

var path = svg.append("path")
  .style("fill", "#f48023")
  .attr("d", d)
  .style("opacity", 0)
  .transition()
  .duration(1000)
  .style("opacity", 1);
  

var path2 = svg.append("path")
  .style("fill", "#bcbbbb")
  .attr("d", d2)
  .style("opacity", 0)
  .transition()
  .duration(1000)
  .style("opacity", 1);

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

D3转换：持续时间不适用于直线路径

1 个答案: