Question

我在D3.js中实现了条形图以及线/区域/饼图/蜡烛。但它停止运行，无法调试我做错了什么......请帮忙我添加了吧功能...之前它正在工作即使控制台没有显示任何错误..

＆＃13;

// loading sample.json
var sample2 = {
    "sample2": [{
        "time": 1387212120,
            "open": 368,
            "close": 275,
            "high": 380,
            "low": 158
    }, {
        "time": 1387212130,
            "open": 330,
            "close": 350,
            "high": 389,
            "low": 310
    }, {
        "time": 1387212140,
            "open": 213,
            "close": 253,
            "high": 289,
            "low": 213
    }, {
        "time": 1387212150,
            "open": 180,
            "close": 150,
            "high": 189,
            "low": 110
    }, {
        "time": 1387212160,
            "open": 310,
            "close": 350,
            "high": 389,
            "low": 310
    }]
};

sample2 = sample2.sample2
  // date manipulation to format UTC to js Date obj
sample2.forEach(function(d) {
  d.time = new Date(d.time * 1000);
});

// helpers and constants
var margin = {
  "top": 50,
  "right": 100,
  "bottom": 56,
  "left": 50
};
var width = 930 - margin.right - margin.left;
var height = 582 - margin.top - margin.bottom;
var radius = Math.min(width, height) / 2;
var timeFormat = d3.time.format("%c");
var X = width / sample2.length * 0.25;

// find data range
var xDomain = d3.extent(sample2, function(d, i) {
  return d.time;
});
var yMin = d3.min(sample2, function(d) {
  return Math.min(d.low);
});
var yMax = d3.max(sample2, function(d) {
  return Math.max(d.high);
});

// scales, add 10pc padding to x-domain
var xScale = d3.time.scale()
  .domain(xDomain);

var arc = d3.svg.arc()
  .innerRadius(radius - 100)
  .outerRadius(radius - 20);


xScale.domain([-0.1, 1.1].map(xScale.invert))
  .range([margin.left, width - margin.right]);

var yScale = d3.scale.linear()
  .domain([yMin, yMax])
  .range([height - margin.top, margin.bottom]);

// set up axes
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .ticks(10)
  .tickPadding(10);
// .tickFormat(timeFormat)

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("right")
  .tickValues(yScale.domain());

// set up chart types
var area = d3.svg.area()
  .x(function(d) {
    return xScale(d.time);
  })
  .y0(height - margin.bottom)
  .y1(function(d) {
    return yScale(d.close);
  });

var line = d3.svg.line().interpolate("monotone")
  .x(function(d) {
    return xScale(d.time);
  })
  .y(function(d) {
    return yScale(d.close);
  });

var bar = d3.scale.ordinal()
.rangeRoundBands([0, width], .1).value(function(d) {
  return d.time
});

var pie = d3.layout.pie()
  .value(function(d) {
    return d.time;
  })
  .sort(null);

// create svg container and offset
var canvas = d3.select("body").append("svg")
  .attr({
    "width": width,
    "height": height
  })
  .append("g")
  .attr("transform", "translate(" + margin.top / 2 + "," + margin.left / 2 + ")");

var color = d3.scale.category20();
// gridsk
canvas.append("svg:rect")
  .attr({
    "width": width - margin.right - margin.left,
    "height": height - margin.bottom - margin.top,
    "class": "plot",
    "transform": "translate(" + margin.top + "," + margin.bottom + ")"
  });

// chart options by type
var chartDraw = {

  candle: function() {

    canvas.selectAll("line.candle")
      .data(sample2)
      .enter()
      .append("svg:line")
      .attr({
        "class": "candle alt-view",
        "x1": function(d, i) {
          return xScale(d.time) - X * 0.5;
        },
        "x2": function(d, i) {
          return xScale(d.time) - X * 0.5;
        },
        "y1": function(d, i) {
          return yScale(d.high);
        },
        "y2": function(d, i) {
          return yScale(d.low);
        },
        "stroke": "black"
      });

    canvas.selectAll("rect.candle")
      .data(sample2)
      .enter()
      .append("svg:rect")
      .attr({
        "class": "candle alt-view",
        "width": function(d) {
          return X
        },
        "x": function(d, i) {
          return xScale(d.time) - X;
        },
        "y": function(d, i) {
          return yScale(Math.max(d.open, d.close));
        },
        "height": function(d, i) {
          return yScale(Math.min(d.open, d.close)) - yScale(Math.max(d.open, d.close));
        },
        "fill": function(d) {
          return d.open > d.close ? "#dc432c" : "#0CD1AA"
        },
        "stroke": "gray"
      });

  },

  line: function() {

    canvas.append("path")
      .datum(sample2)
      .attr("class", "line alt-view")
      .attr("d", line);
  },
  
  bar: function() {
    canvas.append("path")
      .datum(sample2)
      .attr("class", "bar alt-view")
      .attr("d", bar);
  },

  pie: function() {
    var container = canvas.selectAll(".arc")
      .data(pie(sample2))
      .enter().append("path")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .attr("class", "pie alt-view")
      .attr("fill", function(d, i) {
        return color(i);
      })
      .attr("d", arc)
      .each(function(d) {
        this._current = d;
      });
  },

  area: function() {

    canvas.append("path")
      .datum(sample2)
      .attr("class", "area alt-view")
      .attr("d", area);
  }
};


// draw axes
canvas.append('g').classed("axis", true).call(xAxis)
  .attr('transform', 'translate(0, ' + (height - margin.bottom) + ')');
canvas.append('g').classed("axis", true).call(yAxis)
  .attr('transform', 'translate(' + (width - margin.right) + ', 0)');

// drop down menu
var chartOptions = ["line", "candle", "area", "bar", "pie"];
var dropdown = d3.select("body").append("foreignObject")
  .attr({
    "height": 100,
    "width": 300,
    "transform": "translate(" + margin.left * 1.3 + "," + margin.top * 0.7 + ")"
  })
  .append("xhtml:select")
  .on("change", function() {

    d3.selectAll(".alt-view").remove();

    selected = this.value;

    if (selected == "line") {
      canvas.selectAll(".axis").style("display", "block");
      canvas.select(".plot").style("display", "block");
      chartDraw.line();
    } else if (selected == "area") {
      canvas.selectAll(".axis").style("display", "block");
      canvas.select(".plot").style("display", "block");
      chartDraw.area();
    } else if (selected == "candle") {
      canvas.selectAll(".axis").style("display", "block");
      canvas.select(".plot").style("display", "block");
      chartDraw.candle();
    } else if (selected == "bar") {
      canvas.selectAll(".axis").style("display", "block");
      canvas.select(".plot").style("display", "block");
      chartDraw.bar();
    
    else if (selected == "pie") {
      canvas.selectAll(".axis").style("display", "none");
      canvas.select(".plot").style("display", "none");
      chartDraw.pie();
    }

  })
  .attr("id", "drop-down")
  .selectAll("option")
  .data(chartOptions)
  .enter()
  .append("option")
  .text(function(d) {
    return d;
  })
  .attr("value", function(d) {
    return d;
  });


// default chart
chartDraw.line();

＆＃13;

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="inlet.js"></script>
<link src="style.css" />
<body></body>

＆＃13;

`

条形图与d3.js中的行/区域/饼图

0 个答案: