Question

在我的折线图中，最初是绘图线所需的所有数据。有两个按钮Make和sell，如果我点击任意一个按钮，则应该为具有过渡效果的行绘制与该按钮相关的数据，如this link 所示。我试图让这项工作，但我做不到。我尝试在按钮和折线图之间建立关系如下（代码），它不起作用。我在代码buttonId中使用sell进行了硬编码以获得与sell相关的数据，如果我将其更改为Make，我将获得与Make相关的数据但我需要在这里硬编码。我想要的是当Make按钮点击与Make相关的数据时，如上所示链接应该转换。我的代码是

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="d3.chart.min.js"></script>

 </head>
 <body>
 <div id="vis"></div>
<button id="Make">Make</button>
<button id="sell">sell</button>
<script type="text/javascript">


d3.chart("linechart", {

  initialize: function() {
    // create a base scale we will use later.
   var chart = this;
    chart.w = chart.base.attr('width') || 200;
    chart.h = chart.base.attr('height') || 150;
    chart.w = +chart.w;
    chart.h = +chart.h;
    buttonId = 'sell'
   chart.x = d3.scale.linear()
      .range([0, chart.w]);

  chart.y = d3.scale.linear()
      .range([chart.h,0]);

  chart.base.classed('line', true);

  this.areas = {};
      chart.areas.lines = chart.base.append('g')
              .classed('lines', true)
              .attr('width', chart.w)
              .attr('height', chart.h)

       chart.line = d3.svg.line()
                  .x(function(d) { return chart.x(d.x);})   
                  .y(function(d) { return chart.y(d.y);});


    this.layer("lines", chart.areas.lines, {
dataBind: function(data) {
    // update the domain of the xScale since it depends on the data
       chart.y.domain([d3.min(data,function(d){return d.y}),d3.max(data,function(d){return d.y})])
 var mydata=new Array();
if(buttonId)
{
  var j=0;
  for(var i in data)
  {
   if(data[i].custody === buttonId){mydata[j] = data[i]; j++;};
  }
  chart.x.domain(d3.extent(mydata, function(d) { return d.x; }));
}
else
{
  chart.x.domain(d3.extent(data, function(d) { return d.x; }));
}

    // return a data bound selection for the passed in data.
    return this.selectAll("path").data([data]);
  },
 insert: function() {
    return this.append("path")
              .datum(data)
              .attr("d", chart.line)
              .attr('stroke','#1ABC9C')
              .attr('stroke-width','2')
              .attr('fill','none');

  }

    });
  },

  // configures the width of the chart.
  // when called without arguments, returns the
  // current width.
  width: function(newWidth) {
    if (arguments.length === 0) {
      return this.w;
    }
    this.w = newWidth;
    return this;
  },

  // configures the height of the chart.
  // when called without arguments, returns the
  // current height.
  height: function(newHeight) {
    if (arguments.length === 0) {
      return this.h;
    }
    this.h = newHeight;
    return this;
  },

});

var data = [
{x: 0,y:190, custody: "Make"},
  {x: 1,y:10, custody: "Make"},{x: 2,y:40, custody: "Make"},{x: 3,y:90, custody: "Make"},
  {x: 4,y:30, custody: "sell"},{x: 5,y:20, custody: "sell"},{x: 6,y:10, custody: "sell"},
  {x: 7,y:40, custody: "sell"}
];

var chart1 = d3.select("#vis")
  .append("svg")
  .chart("linechart")
  .width(720)
  .height(320)

chart1.draw(data);
</script>
</body>
</html>

从d3.chart.min.js获取d3.chart.min.js 从d3.v3.min.js

获取d3.v3.min.js

使用d3.js在折线图上转换

0 个答案: