javascript - d3中svg中形状宽度的绝对值

我缩放功能的代码是

 var innerWidth = 117;
 var innerHeight = 14;
 // create a scaling function
 var max = .8;
 var min = -.7;
 var wScale = d3.scale.linear()
 .domain([0, max])
 .range([0, innerWidth]);

创建矩形的代码是

 var sel = selection.selectAll("svg")
 .selectAll("rect")
 .transition().duration(500)
 .attr("width", function(d) { return wScale(Math.abs(d))});

但是，这似乎不起作用，并且对于d的负值，当我希望矩形的宽度根据d的绝对值时，没有形成矩形。

在这方面的任何帮助将不胜感激

编辑

我的问题是参考该应用程序here提供的，并且与水平的蓝色条带有关。天真地使用JS，经过一番探索之后，我确定了应用程序中创建水平蓝色条带的代码块。但是，我希望它不是相同的酒吧，而略有不同

这是创建绘图的代码。

 col_3 = JS('function makeGraph(selection){

        // find out wich table and column
        var regex = /(col_\\d+)/;
        var col = regex.exec(this[0][0].className)[0];
        var regex = /tbl_(\\S+)/;
        var tbl = regex.exec(this[0][0].className)[1];
        var innerWidth = 117;
        var innerHeight = 14;

        // create a scaling function
        var max = colMax(tbl, col);
        var min = colMin(tbl, col);
        var wScale = d3.scale.linear()
                       .domain([0, max])
                       .range([0, innerWidth]);

        // text formatting function
        var textformat = d3.format(".1f");

        // column has been initialized before, update function
        if(tbl + "_" + col + "_init" in window) {
            var sel = selection.selectAll("svg")
                     .selectAll("rect")
                     .transition().duration(500)
                     .attr("width", function(d) { return wScale(d.value)});
            var txt = selection
                        .selectAll("text")
                        .text(function(d) { return textformat(d.value); });
           return(null);
        }

        // can remove padding here, but still cant position text and box independently
        this.style("padding", "5px 5px 5px 5px");

        // remove text. will be added back later
        selection.text(null);

        var svg = selection.append("svg")
              .style("position",  "absolute")
              .attr("width", innerWidth)
              .attr("height", innerHeight);

        var box = svg.append("rect")
                     .style("fill", "lightblue")
                     .attr("stroke","none")
                     .attr("height", innerHeight)
                     .attr("width", min)
                     .transition().duration(500)
                     .attr("width", function(d) { return wScale(d.value); });

        // format number and add text back
        var textdiv = selection.append("div");
                          textdiv.style("position",  "relative")
                                 .attr("align", "right");

        textdiv.append("text")
                 .text(function(d) { return textformat(d.value); });
        window[tbl + "_" + col + "_init"] = true;
      }')

最佳答案

您的代码中有很多缺失的元素。未定义选择。您必须使用数据调用数据功能。必须有一个带有附加的回车部分。

我用代码中的一些参数创建了一个小提琴。
它或多或少地起作用。

var data =[1];

 var sel = d3.select("svg")
   .selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
     .attr("width",10)
     .attr("height",40)
     .attr('x', 1.5)
     .attr('y', 1.5)
     .transition().duration(500)
       .attr("width", function(d) { return wScale(Math.abs(d))});

http://jsfiddle.net/acerola/symcuccm/