How to call a two same name method separately in Javascript

I'm trying to create a donut chart library() using d3.js. I'm using this library to create donut charts on a html page. Donut chart's slices are invoking method slice_clicked(d) on mousedown.

I'm stucked when i have to display 2 donut charts on a page using single library. I'm not getting how to manage 2 slice_clicked(d) separately for 2 donut charts.

Please check the code snippet. Where

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

will be execute on clicking any donut chart's slice. I want to call

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

on 1st donut slice click. and on 2nd donut's slice click :

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

What is the best way to handle such situtation?

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>

Answers 1

  • I have managed to solve the problem by using

    slice.on("mousedown", function(d){  
        window[domprops.sliceClicked](d);
    });
    

    and passing the function name like :

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

Related Articles