Question

我创建了一个折线图（D3 V4）并试图揭示它，以便首先显示时间序列中的第一个点，其余部分逐渐显示。

我的x轴是-1和1之间的'得分'，y轴是时间。

我想要使用Mike Bostock在这里创建的过渡技术：https://bl.ocks.org/mbostock/5649592（D3 V3）但是当我实现此代码时，该行根本不会显示任何过渡影响，并且会出现黑色区域填充:(我认为这是因为D3的V3和V4之间的差异，但我的谷歌搜索并没有帮助我找到什么打破。

我用d3.json加载的数据（“URL_TO_DATA”..看起来像：

[{"date": "2017-07-30-15-01", "score": -1.0}, {"date": "2017-08-06-18-23",  "score": 0.0}, {"date": "2017-08-06-18-57", "score": 0.3}, {"date": "2017-08-07-16-26", "score": 0.0}, {"date": "2017-08-07-16-40", "score": 0.2}, {"date": "2017-08-07-17-02", "score": 0.0}, {"date": "2017-08-07-17-03", "score": -0.1}, {"date": "2017-08-07-17-03", "score": -0.3}]

我的样式看起来像：

.line {
fill: none;
stroke: url(#line-gradient);
stroke-width: 7px;
}

我的javascript看起来像：

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var parseTime = d3.timeParse("%Y-%m-%d-%H-%M");

var y = d3.scaleTime().range([height, 0]);
var x = d3.scaleLinear().range([width, 0]);

var valueline = d3.line()
.defined(function(d){return d.date != null && d.date != undefined})
.curve(d3.curveBasis)
.y(function(d) { return y(d.date); })
.x(function(d) { return x(d.score); });

var svg = d3.select("body").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 + ")");

d3.json("URL_TO_DATA", function(error, data) {

data.forEach(function(d) {
  d.date = parseTime(d.date);
  d.score = +d.score;
  });

console.log(data[0]);
y.domain(d3.extent(data, function(d) { return d.date; }));
x.domain([-1,1]
//d3.min(data, function(d) { return d.score; }), d3.max(data, function(d) {         return d.score; })]
);

// set the gradient
svg.append("linearGradient")
.attr("id", "line-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", x(-1)).attr("y1", 0)//d3.min(data, function(d) { return d.score;     }))
.attr("x2", x(1)).attr("y2", 0)//d3.max(data, function(d) { return d.score;  }))//y(10))//d3.max(data, function(d) { return d.date; }))
.selectAll("stop")
.data([
{offset: "0%", color: "red"},
{offset: "40%", color: "red"},
{offset: "50%", color: "Gainsboro"},
{offset: "60%", color: "lawngreen"},
{offset: "100%", color: "lawngreen"}
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });

// 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("path")
.data([data])
.style("stroke-dasharray", "4,4")
.attr("class", "line")
.attr("d", valueline);

svg.append("path")
.data([data])
.attr("d", valueline)
.call(transition);

function transition(path) {
path.transition()
  .duration(750)
  .attrTween("stroke-dasharray", tweenDash)
  .on("end", function() { d3.select(this).call(transition); });
}

function tweenDash() {
console.log(this.getTotalLength());
var l = this.getTotalLength(),
    i = d3.interpolateString("0," + l, l + "," + l);
return function(t) { return i(t); };
}


});

</script>

谢谢：）

Answer 1

代码中的问题是您有两条路径。但是，您呼叫transition的路径没有fill，stroke或stroke-width属性。解决它：

svg.append("path")
    .data([data])
    .attr("d", valueline)
    .attr("fill", "none")
    .attr("stroke", "url(#line-gradient)")
    .attr("stroke-width", 7)
    .call(transition);

以下是包含这些更改的代码：

＆＃13;

.line {
  fill: none;
  stroke: url(#line-gradient);
  stroke-width: 7px;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 50
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  var data = [{
    "date": "2017-07-30-15-01",
    "score": -1.0
  }, {
    "date": "2017-08-06-18-23",
    "score": 0.0
  }, {
    "date": "2017-08-06-18-57",
    "score": 0.3
  }, {
    "date": "2017-08-07-16-26",
    "score": 0.0
  }, {
    "date": "2017-08-07-16-40",
    "score": 0.2
  }, {
    "date": "2017-08-07-17-02",
    "score": 0.0
  }, {
    "date": "2017-08-07-17-03",
    "score": -0.1
  }, {
    "date": "2017-08-07-17-03",
    "score": -0.3
  }];

  var parseTime = d3.timeParse("%Y-%m-%d-%H-%M");

  var y = d3.scaleTime().range([height, 0]);
  var x = d3.scaleLinear().range([width, 0]);

  var valueline = d3.line()
    .defined(function(d) {
      return d.date != null && d.date != undefined
    })
    .curve(d3.curveBasis)
    .y(function(d) {
      return y(d.date);
    })
    .x(function(d) {
      return x(d.score);
    });

  var svg = d3.select("body").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 + ")");

  data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.score = +d.score;
  });

  y.domain(d3.extent(data, function(d) {
    return d.date;
  }));
  x.domain([-1, 1]
    //d3.min(data, function(d) { return d.score; }), d3.max(data, function(d) {         return d.score; })]
  );

  // set the gradient
  svg.append("linearGradient")
    .attr("id", "line-gradient")
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", x(-1)).attr("y1", 0) //d3.min(data, function(d) { return d.score;     }))
    .attr("x2", x(1)).attr("y2", 0) //d3.max(data, function(d) { return d.score;  }))//y(10))//d3.max(data, function(d) { return d.date; }))
    .selectAll("stop")
    .data([{
      offset: "0%",
      color: "red"
    }, {
      offset: "40%",
      color: "red"
    }, {
      offset: "50%",
      color: "Gainsboro"
    }, {
      offset: "60%",
      color: "lawngreen"
    }, {
      offset: "100%",
      color: "lawngreen"
    }])
    .enter().append("stop")
    .attr("offset", function(d) {
      return d.offset;
    })
    .attr("stop-color", function(d) {
      return d.color;
    });

  // 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("path")
    .data([data])
    .style("stroke-dasharray", "4,4")
    .attr("class", "line")
    .attr("d", valueline);

  svg.append("path")
    .data([data])
    .attr("d", valueline)
    .attr("fill", "none")
    .attr("stroke", "url(#line-gradient)")
    .attr("stroke-width", 7)
    .call(transition);

  function transition(path) {
    path.transition()
      .duration(750)
      .attrTween("stroke-dasharray", tweenDash)
      .on("end", function() {
        d3.select(this).call(transition);
      });
  }

  function tweenDash() {
    var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
    return function(t) {
      return i(t);
    };
  }

</script>

＆＃13;

将D3 V4折线图转换为视图

1 个答案: