Question

我最近开始尝试自学D3，我要围绕输入，更新，退出范例。

下面我有一个我正在尝试使用的一些进步圈的例子;

http://plnkr.co/edit/OoIL8v6FemzjzoloJxtQ?p=preview

现在，由于这里的目的是更新圆圈路径而不删除它们，我相信我不应该使用退出功能？在这种情况下，我的印象是我可以在新函数中更新我的数据源，然后调用路径转换，我会获得更新的值。但事实并非如此。

我想知道是否有人可以帮助我并告诉我哪里出错了？

var dataset = [{
  "vendor-name": "HP",
  "overall-score": 45
}, {
  "vendor-name": "CQ",
  "overall-score": 86
}];

var dataset2 = [{
  "vendor-name": "HP",
  "overall-score": 22
}, {
  "vendor-name": "CQ",
  "overall-score": 46
}];

var width = 105,
  height = 105,
  innerRadius = 85;

var drawArc = d3.svg.arc()
  .innerRadius(innerRadius / 2)
  .outerRadius(width / 2)
  .startAngle(0);

var vis = d3.select("#chart").selectAll("svg")
  .data(dataset)
  .enter()
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

vis.append("circle")
  .attr("fill", "#ffffff")
  .attr("stroke", "#dfe5e6")
  .attr("stroke-width", 1)
  .attr('r', width / 2);

vis.append("path")
  .attr("fill", "#21addd")
  .attr('class', 'arc')
  .each(function(d) {
    d.endAngle = 0;
  })
  .attr('d', drawArc)

.transition()
  .duration(1200)
  .ease('linear')
  .call(arcTween);

vis.append('text')
  .text(0)
  .attr("class", "perc")
  .attr("text-anchor", "middle")
  .attr('font-size', '36px')
  .attr("y", +10)
  .transition()
  .duration(1200)
  .tween(".percentage", function(d) {
    var i = d3.interpolate(this.textContent, d['overall-score']),
      prec = (d.value + "").split("."),
      round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
    return function(t) {
      this.textContent = Math.round(i(t) * round) / round + "%";
    };
  });


function updateChart() {
  vis = vis.data(dataset2)
  vis.selectAll("path")
    .transition()
    .duration(1200)
    .ease('linear')
    .call(arcTween);
  vis.selectAll('text')
    .transition()
    .duration(1200)
    .tween(".percentage", function(d) {
      var i = d3.interpolate(this.textContent, d['overall-score']),
        prec = (d.value + "").split("."),
        round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
      return function(t) {
        this.textContent = Math.round(i(t) * round) / round + "%";
      };
    });

}

function arcTween(transition, newAngle) {

  transition.attrTween("d", function(d) {

    var interpolate = d3.interpolate(0, 360 * (d['overall-score'] / 100) * Math.PI / 180);

    return function(t) {

      d.endAngle = interpolate(t)

      return drawArc(d);
    };
  });
}

非常感谢任何帮助/建议！

全部谢谢

Answer 1

您需要通过DOM刷新数据 - svg＆gt; g>路径：

import requests
from bs4 import BeautifulSoup

def parse(soup):

        for comp in soup.select("div.base.startup"):
            text = comp.select_one("div.text")
            yield (text.select_one("div.name").text.strip()), text.select_one("div.pitch").text.strip()

def connect(page):
    header = {
        "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36",
        "X-Requested-With": "XMLHttpRequest",
    }

    with requests.Session() as s:
        r = s.get("https://angel.co/companies").content
        csrf = BeautifulSoup(r, "lxml").select_one("meta[name=csrf-token]")["content"]
        header["X-CSRF-Token"] = csrf
        ids = s.post("https://angel.co/company_filters/search_data", data={"sort": "signal","page":page}, headers=header).json()
        _ids = "".join(["ids%5B%5D={}&".format(i) for i in ids.pop("ids")])
        rest = "&".join(["{}={}".format(k, v) for k, v in ids.items()])
        url = "https://angel.co/companies/startups?{}{}".format(_ids, rest)
        rsp = s.get(url, headers=header)
        soup = BeautifulSoup(rsp.json()["html"], "lxml")
        for n, p in parse(soup):
            yield n, p
for i in range(1, 21):
    for name, pitch in connect(i):
        print(name, pitch)

为每个步骤存储d3 DOM数据绑定对象，您可以控制enter（），extit（）和transition（）元素。在transition（）函数中放置元素的更改属性：

// SET DATA TO SVG  
var svg = d3.selectAll("svg")
            .data(selectedDataset)

// SET DATA TO G
var g = svg.selectAll('g')
           .data(function(d){return [d];})

// SET DATA TO PATH
var path = g.selectAll('path')
            .data(function(d){ return [d]; });

http://plnkr.co/edit/gm2zpDdBdQZ62YHhDbLb?p=preview

尝试使用新数据更新d3.js圈子

1 个答案: