Question

我正在尝试在angular4中创建可缩放的d3散点图。我将此链接作为参考：http://bl.ocks.org/peterssonjonas/4a0e7cb8d23231243e0e

我的代码是：

var margin = { top: 50, right: 300, bottom: 50, left: 50 },
    outerWidth = 1050,
    outerHeight = 500,
    width = outerWidth - margin.left - margin.right,
    height = outerHeight - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]).nice();

var y = d3.scale.linear()
    .range([height, 0]).nice();

var xCat = "Calories",
    yCat = "Potassium",
    rCat = "Protein (g)",
    colorCat = "Manufacturer";

d3.csv("cereal.csv", function(data) {
  data.forEach(function(d) {
    d.Calories = +d.Calories;
    d.Carbs = +d.Carbs;
    d["Cups per Serving"] = +d["Cups per Serving"];
    d["Dietary Fiber"] = +d["Dietary Fiber"];
    d["Display Shelf"] = +d["Display Shelf"];
    d.Fat = +d.Fat;
    d.Potassium = +d.Potassium;
    d["Protein (g)"] = +d["Protein (g)"];
    d["Serving Size Weight"] = +d["Serving Size Weight"];
    d.Sodium = +d.Sodium;
    d.Sugars = +d.Sugars;
    d["Vitamins and Minerals"] = +d["Vitamins and Minerals"];


  });


  var xMax = d3.max(data, function(d) { return d[xCat]; }) * 1.05,
      xMin = d3.min(data, function(d) { return d[xCat]; }),
      xMin = xMin > 0 ? 0 : xMin,
      yMax = d3.max(data, function(d) { return d[yCat]; }) * 1.05,
      yMin = d3.min(data, function(d) { return d[yCat]; }),
      yMin = yMin > 0 ? 0 : yMin;

  x.domain([xMin, xMax]);
  y.domain([yMin, yMax]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(-height);

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickSize(-width);

  var color = d3.scale.category10();

  var tip = d3.tip()
      .attr("class", "d3-tip")
      .offset([-10, 0])
      .html(function(d) {
        return xCat + ": " + d[xCat] + "<br>" + yCat + ": " + d[yCat];
      });

  var zoomBeh = d3.behavior.zoom()
      .x(x)
      .y(y)
      .scaleExtent([0, 500])
      .on("zoom", zoom);

  var svg = d3.select("#scatter")
    .append("svg")
      .attr("width", outerWidth)
      .attr("height", outerHeight)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoomBeh);

  svg.call(tip);

  svg.append("rect")
      .attr("width", width)
      .attr("height", height);

  svg.append("g")
      .classed("x axis", true)
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .classed("label", true)
      .attr("x", width)
      .attr("y", margin.bottom - 10)
      .style("text-anchor", "end")
      .text(xCat);

  svg.append("g")
      .classed("y axis", true)
      .call(yAxis)
    .append("text")
      .classed("label", true)
      .attr("transform", "rotate(-90)")
      .attr("y", -margin.left)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text(yCat);

  var objects = svg.append("svg")
      .classed("objects", true)
      .attr("width", width)
      .attr("height", height);

  objects.append("svg:line")
      .classed("axisLine hAxisLine", true)
      .attr("x1", 0)
      .attr("y1", 0)
      .attr("x2", width)
      .attr("y2", 0)
      .attr("transform", "translate(0," + height + ")");

  objects.append("svg:line")
      .classed("axisLine vAxisLine", true)
      .attr("x1", 0)
      .attr("y1", 0)
      .attr("x2", 0)
      .attr("y2", height);

  objects.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .classed("dot", true)
      .attr("r", function (d) { return 6 * Math.sqrt(d[rCat] / Math.PI); })
      .attr("transform", transform)
      .style("fill", function(d) { return color(d[colorCat]); })
      .on("mouseover", tip.show)
      .on("mouseout", tip.hide);

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .classed("legend", true)
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("circle")
      .attr("r", 3.5)
      .attr("cx", width + 20)
      .attr("fill", color);

  legend.append("text")
      .attr("x", width + 26)
      .attr("dy", ".35em")
      .text(function(d) { return d; });

  d3.select("input").on("click", change);

  function change() {
    xCat = "Carbs";
    xMax = d3.max(data, function(d) { return d[xCat]; });
    xMin = d3.min(data, function(d) { return d[xCat]; });

    zoomBeh.x(x.domain([xMin, xMax])).y(y.domain([yMin, yMax]));

    var svg = d3.select("#scatter").transition();

    svg.select(".x.axis").duration(750).call(xAxis).select(".label").text(xCat);

    objects.selectAll(".dot").transition().duration(1000).attr("transform", transform);
  }

  function zoom() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);

    svg.selectAll(".dot")
        .attr("transform", transform);
  }

  function transform(d) {
    return "translate(" + x(d[xCat]) + "," + y(d[yCat]) + ")";
  }
});

图形非常完美。但是我不想使用CSV文件。我已经有一个必须直接在图形中呈现的数组，而无需经历这段代码：

d3.csv("cereal.csv", function(data) {
  data.forEach(function(d) {
    d.Calories = +d.Calories;
    d.Carbs = +d.Carbs;
    d["Cups per Serving"] = +d["Cups per Serving"];
    d["Dietary Fiber"] = +d["Dietary Fiber"];
    d["Display Shelf"] = +d["Display Shelf"];
    d.Fat = +d.Fat;
    d.Potassium = +d.Potassium;
    d["Protein (g)"] = +d["Protein (g)"];
    d["Serving Size Weight"] = +d["Serving Size Weight"];
    d.Sodium = +d.Sodium;
    d.Sugars = +d.Sugars;
    d["Vitamins and Minerals"] = +d["Vitamins and Minerals"];


  });

我的数组将如下所示：

data = [
{ Calories: 200, Carbs:344,Fat: 344, Potassium: 100,SodiumSugars:233},
{ Calories: 300, Carbs:224,Fat: 334, Potassium: 20,SodiumSugars:133}
]

给定示例中的所有其他内容都是我所需要的，只是我无法弄清楚如何以相同的逻辑使用数组代替CSV文件。如何替换

d3.csv("cereal.csv", function(data) {

具有异常存在的数组

Answer 1

转换

d3.csv("cereal.csv", function(data) {

  data.forEach(function(d) {
    // some code
  });

  // draw code
});

收件人

function drawgraph(data) {
  // draw code
}

data = [
{ Calories: 200, Carbs:344,Fat: 344, Potassium: 100,SodiumSugars:233},
{ Calories: 300, Carbs:224,Fat: 334, Potassium: 20,SodiumSugars:133}
];

drawgraph(data);

使用数组代替d3.csv方法来绘制散点图

1 个答案: