0

Hi guys i have a problem creating a simple d3 chart for a javascript web project. This code is kind of created like in a tutorial so i don't really know why i get the error:

Uncaught TypeError: d3.bullet is not a function
as i installed d3 and am also linking the newest d3 version in the first script. I haven't seen this error before when googling or searching it on stackoverflow.

     <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
 <script src="js/bullet.js"></script>
 <script>
  var margin = {top: 5, right: 40, bottom:20 , left:120},
  width = 800-margin.left - margin.right,
  height = 50-margin.top - margin.bottom;

  var chart = d3.bullet()
          .width(width)
          .height(height);

  d3.json("data/jsonFakeDaten.json", function(error, data) {
    var svg = d3.select("body").selectAll("svg")
          .data(data)
        .enter().appennd("svg")
          .attr("class","bullet")
          .attr("width",width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .call(chart);


    var title = svg.append("g")
        .style("text-anchor", "end")
        .attr("transform", "translate(-6," + height / 2 + ")");

    title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.title; });

    title.append("text")
      .attr("class", "subtitle")
      .attr("dy", "lem")
      .text(function (d) { return d.subtitle; });

    d3.selectAll("button").on("click", function() {
      svg.datum(randomize).call(chart.duration(1000));
    });

  });

  function randomize(d) {
    if(!d.randomizer) d.randomizer = randomizer(d);
    d.markers = d.markers.map(d.randomizer);
    d.measures = d.measures.map(d.randomizer);
    return d;
  }

  function randomizer(d) {
    var k = d3.max(d.ranges) * .2;
    return function(d) {
      return Math.max(0,d + k * (Math.random() - .5));
    };
  }
</script>
Torben
  • 558
  • 2
  • 7
  • 16

1 Answers1

0

First thing that I've noticed is that you have a typo here:

    .enter().appennd("svg")

That could be causing some errors for you, also if you're using the bullet.js from Bostock's bl.ocks.org example, then you should be using d3.v3 not v4 because they're not compatible.

sylverfyst
  • 95
  • 5