javascript - 如何在Javascript中分别调用两个同名方法

Question

我正在尝试使用 d3.js 创建一个圆环图库()。我正在使用这个库在 html 页面上创建圆环图。圆环图的切片在 mousedown 上调用方法 slice_clicked(d)。

当我必须使用单个库在页面上显示 2 个圆环图时，我陷入了困境。我不知道如何分别管理 2 个圆环图的 2 个 slice_clicked(d)。

请检查代码片段。哪里

function slice_clicked(d) 
{
    alert("2"); 
}

将在单击任何圆环图的切片时执行。我要打电话

function slice_clicked(d) 
{
    alert("1"); 
}

点击第一个 donut 切片。然后在第二个 donut 切片上单击:

function slice_clicked(d) 
{
        alert("2"); 
}

处理这种情况的最佳方法是什么？

function initdonut(elementid, domprops) {
  this.update = function(data) {
    var svg = d3.select(elementid)
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .append("g")

    svg.append("g")
      .attr("class", "slices")
      .attr("width", "100%")
      .attr("height", "100%");
    svg.append("g")
      .attr("class", "labelName")
      .attr("width", "100%")
      .attr("height", "100%");

    svg.append("g")
      .attr("class", "lines")
      .attr("width", "100%")
      .attr("height", "100%");

    var width = $(elementid).innerWidth(),
      height = $(elementid).innerHeight(),
      radius = Math.min(width, height) / 2;

    var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {
        return d.value;
      });

    var arc = d3.svg.arc()
      .outerRadius(radius * 0.8)
      .innerRadius(radius * 0.4);

    var outerArc = d3.svg.arc()
      .innerRadius(radius * 0.9)
      .outerRadius(radius * 0.9);

    svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    slice = svg.select(".slices").selectAll("path.slice")
      .attr("class", "slices")
      .data(pie(data));

    slice.enter()
      .insert("path");
    slice.style("fill", function(d) {
      return d.data.colorcode;
    });
    slice.style("stroke", "white")
      .style("stroke-width", 3)
      .attr("class", "slice")
      .attr("d", function(d) {
        return arc(d);
      });
    slice.on("mousedown", function(d) {
      slice_clicked(d);
    });
    slice.on("mouseenter", function(d) {
      svg.style("cursor", "pointer");
    });
    slice.on("mouseout", function(d) {
      svg.style("cursor", "default");
    });

    slice.exit()
      .remove();


  };
}

var data = [{
    label: "Category 1",
    value: 9,
    colorcode: "red"
  },
  {
    label: "Category 2",
    value: 5,
    colorcode: "green"
  },
  {
    label: "Category 3",
    value: 13,
    colorcode: "blue"
  }
];

var donut_properties = {
  isgradient: true,
  textfontfamily: "sans-serif",
  textfontsize: "11px",
  textfontweight: "bold",
  textfontcolor: "black",
};


function slice_clicked(d) { //This should be execute on click slice of donut-1
  alert("1");
}

var dc = new initdonut("#piechart", donut_properties);

dc.update(data);

var data2 = [{
    label: "Category 1",
    value: 19,
    colorcode: "red"
  },
  {
    label: "Category 2",
    value: 15,
    colorcode: "green"
  },
  {
    label: "Category 3",
    value: 13,
    colorcode: "blue"
  }
];

var donut_properties2 = {
  isgradient: true,
  textfontfamily: "sans-serif",
  textfontsize: "11px",
  textfontweight: "bold",
  textfontcolor: "black",
};


function slice_clicked(d) //This should be execute on click slice of donut-2
{
  alert("2");
}

var dc2 = new initdonut("#piechart2", donut_properties2);
dc2.update(data2);

html,
body {
  width: 100%;
  height: 100%;
  margin: none;
  padding: none;
}

#piechart {
  width: 50%;
  height: 50%;
  margin: none;
  padding: none;
  float: left;
}

#piechart2 {
  width: 50%;
  height: 50%;
  margin: none;
  padding: none;
  float: right;
}

polyline {
  opacity: .5;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="piechart"></div>
<div id="piechart2"></div>

Answer 1

这可能对你有帮助。

您可以尝试一下，您可以通过其 elementid 来区分每个饼图上的点击。并通过将 elemtntid 传递给 slice_clicked 函数

来执行相应的功能

function initdonut(elementid, domprops) {

  this.update = function(data) {
    var svg = d3.select(elementid)
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .append("g")

    svg.append("g")
      .attr("class", "slices")
      .attr("width", "100%")
      .attr("height", "100%");
    svg.append("g")
      .attr("class", "labelName")
      .attr("width", "100%")
      .attr("height", "100%");

    svg.append("g")
      .attr("class", "lines")
      .attr("width", "100%")
      .attr("height", "100%");

    var width = $(elementid).innerWidth(),
      height = $(elementid).innerHeight(),
      radius = Math.min(width, height) / 2;

    var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {
        return d.value;
      });

    var arc = d3.svg.arc()
      .outerRadius(radius * 0.8)
      .innerRadius(radius * 0.4);

    var outerArc = d3.svg.arc()
      .innerRadius(radius * 0.9)
      .outerRadius(radius * 0.9);

    svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    slice = svg.select(".slices").selectAll("path.slice")
      .attr("class", "slices")
      .data(pie(data));

    slice.enter()
      .insert("path");
    slice.style("fill", function(d) {
      return d.data.colorcode;
    });
    slice.style("stroke", "white")
      .style("stroke-width", 3)
      .attr("class", "slice")
      .attr("d", function(d) {
        return arc(d);
      });
    slice.on("mousedown", function(d) {
      slice_clicked(elementid,d);
    });
    slice.on("mouseenter", function(d) {
      svg.style("cursor", "pointer");
    });
    slice.on("mouseout", function(d) {
      svg.style("cursor", "default");
    });

    slice.exit()
      .remove();};
}

var data = [
  {
    label: "Category 1",
    value: 9,
    colorcode: "red"
  },
  {
    label: "Category 2",
    value: 5,
    colorcode: "green"
  },
  {
    label: "Category 3",
    value: 13,
    colorcode: "blue"
  }
];

var donut_properties = {
  isgradient: true,
  textfontfamily: "sans-serif",
  textfontsize: "11px",
  textfontweight: "bold",
  textfontcolor: "black",
};


 

var dc = new initdonut("#piechart", donut_properties);

dc.update(data);

var data2 = [{
    label: "Category 1",
    value: 19,
    colorcode: "red"
  },
  {
    label: "Category 2",
    value: 15,
    colorcode: "green"
  },
  {
    label: "Category 3",
    value: 13,
    colorcode: "blue"
  }
];

var donut_properties2 = {
  isgradient: true,
  textfontfamily: "sans-serif",
  textfontsize: "11px",
  textfontweight: "bold",
  textfontcolor: "black",
};


function slice_clicked(elementid, d) 
{
  //distinguish based on elementid
  alert(elementid);
}

var dc2 = new initdonut("#piechart2", donut_properties2);
dc2.update(data2);

html,
body {
  width: 100%;
  height: 100%;
  margin: none;
  padding: none;
}

#piechart {
  width: 50%;
  height: 50%;
  margin: none;
  padding: none;
  float: left;
}

#piechart2 {
  width: 50%;
  height: 50%;
  margin: none;
  padding: none;
  float: right;
}

polyline {
  opacity: .5;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="piechart"></div>
<div id="piechart2"></div>