javascript - 使用 d3.json 处理

Question

我正在尝试使 d3 散点图重复出现在 json 数据中。我知道 d3 有 d3.json 来加载 json 数据，但我的代码不工作。我不太擅长处理 js(这是我第一次使用这种语言)，这就是为什么我需要这方面的帮助。基本上，我需要绘制此数据(xAxis 中的日期和 yAxis 中的 IADP_mGycm2):

[
    {
        "imageID": 1,
        "value": 288.3,
        "date": "2015-10-22"
    },
    {
        "imageID": 2,
        "value": 188.1,
        "date": "2015-10-22"
    }
]

JS:

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 = "date",
    yCat = "value";


d3.json("CR.json", function(error, rawData) {
    if (error) {
        console.error(error);
        return;
    }

    var data = rawData.map(function (d) {
        return {
            date: d.date,
            value: d.value

        }
    });


    var xMax = d3.max(data, function(d) { return d["date"]; }),
        xMin = d3.min(data, function(d) { return d["date"]; }),
        xMin = xMin > 0 ? 0 : xMin,
        yMax = d3.max(data, function(d) { return d["value"]; }) ,
        yMin = d3.min(data, function(d) { return d["value"]; }),
        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["date"] + "<br>" + yCat + ": " + d["value"];
      });

    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("cy", function (d) { return d.value; })
      .attr("cx", function (d) { return d.date; })
      .attr("transform", transform)
      .style("fill", "red")
      .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 = "date";
        xMax = d3.max(data, function(d) { return d["date"]; });
        xMin = d3.min(data, function(d) { return d["date"]; });

        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("date");

        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["date"]) + "," + y(d["value"]) + ")";
    }

});

HTML:

<html>
  <head>
    <meta charset="utf-8">
    <title>Visualization</title>
    <link rel="stylesheet" href="scatter.css" charset="utf-8">
  </head>
  <body>
    <div id="scatter"></div>

    <input type="button" name="xAxis" value="xAxis">

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script src="scatter.js" charset="utf-8"></script>
  </body>
</html>

CSS:

rect {
  fill: transparent;
  shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.1);
  shape-rendering: crispEdges;
}

.axisLine {
  fill: none;
  shape-rendering: crispEdges;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 2px;
}

.dot {
  fill-opacity: .5;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

提前致谢!

Answer 1

我看到的一个问题是您在此代码块末尾缺少 }):

var data = rawData.map(function (d) {
    return {
        date: d.date,
        IADP_mGycm2: d.IADP_mGycm2

    };

尝试将其更改为:

 var data = rawData.map(function (d) {
    return {
             date: d.date,
             IADP_mGycm2: d.IADP_mGycm2
           }
    });

如果包含您收到的特定错误消息，它也有助于调试。