Question

我正在玩d3.js的项目...... 我想将轴添加到一组普通的数组数据中......

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first d3.js</title>
    <script src="http://d3js.org/d3.v2.js"></script>
    <link href="style.css" rel="stylesheet">
  </head>

  <body>

    <div id="mySVG"></div>

    <script>       
       var dataArray=[20,40,50,60];
       var width=500;
       var height=500;

       var widthScale=d3.scale.linear()
                        .domain([0,100])
                        .range([0,width])

       var color=d3.scale.linear()
                    .domain([0,60])
                    .range(["blue","red"])
        var axis=d3.svg.axis()
                    .scale(widthScale);


       //container
        var canvas=d3.select("body")
                    .append("svg")
                    .attr("width",width)
                    .attr("height",height)
                    .append("g")
                    .attr("transform","translate(50,50)");
                    .call(axis);


        var bar=canvas.selectAll("rect")
                    .data(dataArray)
                    .enter()
                    .append("rect")
                    .attr("width", function(d){return widthScale(d);})
                    .attr("height",30)
                    .attr("fill",function(d){return color(d)})
                    .attr("y",function(d, i){return i*50;});



    </script>
  </body>

此处 .call（axis）; 会创建一个错误，即“ Uncaught SyntaxError：Unexpected token ”。但我认为它不应该创造。

所以我的问题是如何处理这个问题呢？

Answer 1

在行

.attr("transform","translate(50,50)");
.call(axis);

.后终止;。

d3“.call”功能不起作用

1 个答案: