Twitter bootstrap 使用函数将类附加到现有的.div

我又遇到了一个问题，所以我想我应该发布完整的函数。在本例中，函数作为JSON关联数组传递，其中嵌入了数组waferId DETAILWAVE和htmlData。我已经能够附加waferId信息，并且仍然难以将htmlData键分配为类，即使有建议的更改，我也无法正确绑定DETAILWAFE x和y数据。从值的外观来看，在执行xScale和yScale之后，值都会在一个位置显示出来，大致对应于x和y的0。当我在Firebug中查看JSON中的x和y值时，它们不是零。我不确定作为+d.y和+d.x传递它们是否足以强制它们作为整数，也许这就是我的问题

function buildSlides(data) {
//Constants
var squareSide = 400;
var triangleWidth = 6;
var wafer_center_x = 150027042;
var wafer_center_y = 150187625;
var wafer_scale = 1000000;

//Triangle data
var triangleData = [
    {"x":squareSide / 2 - triangleWidth / 2, "y":squareSide},
    {"x":squareSide / 2, "y":squareSide - triangleWidth},
    {"x":squareSide / 2 + triangleWidth / 2, "y":squareSide},
    {"x":squareSide / 2 - triangleWidth / 2, "y":squareSide}
];
//Create x and y scale
var xScale = d3.scale.linear()
    .domain([-wafer_center_x ,wafer_center_x])
    .range([0, squareSide]);

var yScale = d3.scale.linear()
    .domain([-wafer_center_y,wafer_center_y])
    .range([squareSide,0]);

//line function for triangle path
var lineFunction = d3.svg.line()
    .x(function(d) {return d.x;})
    .y(function(d) {return d.y;})
    .interpolate("linear");

//begin building bootstrap courousel stack
var slides = d3.select(".carousel-inner").selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .attr("class","item")
    .attr("id",function(data) {return data.waferId;})
    .append("div")
    .attr("class","container-fluid")
    .append("div")
    .attr("class","row");

//Make the first slide the active slide
d3.selectAll(".item").classed('active', function(d, i) { return i == 0; });

//Build the image side of the slide
var imageSide = slides.append("div")
    .attr("class","col-lg-6 wafer-and-pareto");

//Build the html side of the slide
var htmlSide = slides.append("div")
    .attr("class","col-lg-6 wafer-info");

//Build final location for div that holds svg waferMap
var waferBox = imageSide.append("div")
    .attr("class","row")
    .append("div")
    .attr("class","col-lg-12")
    .append("div")
    .attr("class","wafer-box")
    .append("svg")
    .attr("class","waferMap")
    .attr("width", squareSide)
    .attr("height",squareSide);

//Add the triangle at the bottom
var triangle = waferBox.append("path")
    .attr("d",lineFunction(triangleData))
    .attr("stroke","gray")
    .attr("stroke-width",1)
    .attr("fill","black");

//Draw a round wafer
var wafer = waferBox.append("ellipse")
    .attr("cx",xScale(wafer_center_x / wafer_scale))
    .attr("rx",xScale(wafer_center_x / wafer_scale))
    .attr("cy",yScale(wafer_center_y / wafer_scale))
    .attr("ry",yScale(wafer_center_y / wafer_scale))
    .attr("fill","none")
    .attr("stroke","gray")
    .attr("stroke-width",1);

//Add data points to wafer map
var circle = waferBox.selectAll("circle")
    .data(function(data) {return data.detailWafer;})
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(+d.x);})
    .attr("cy", function(d) {
        return yScale(+d.y);})
    .attr("r",1);

//build final location for div that will hold the histogram
var paretoBox = imageSide.append("div")
    .attr("class","row")
    .append("div")
    .attr("class","col-lg-12")
    .append("div")
    .attr("class","pareto-box")
    .append("svg")
    .attr("class","chart");

//Add data to the html side
var waferLabels = htmlSide.append("div")
    .attr("class","col-lg-6");

var labelList = waferLabels.selectAll("div")
    .data(function(data){return d3.keys(data.htmlData);})
    .enter()
    .append("div")
    .attr("class","htmlLabel")
    .text(function(d){return d;});

var waferValues = htmlSide.append("div")
    .attr("class","col-lg-6");

var waferList = waferValues.selectAll("div")
    .data(function(data) {return d3.values(data.htmlData);})
    .enter()
    .append("div")
    .attr("class","htmlValue")
    .text(function(data){return data;});

var classes = {};

d3.keys(data.htmlData).forEach(function(d) {
    classes[d] = true;
});

d3.selectAll(".htmlValue")
    .data(function(data) {return d3.keys(data.htmlData);})
    .enter()
    .classed(classes);

}

来自：

如果要同时设置多个类，请使用如下对象文字：selection.classed{'foo'：true，'bar'：false}

在你的情况下，这看起来像这样

var classes = {};
d3.keys(data.htmlData).forEach(function(d) {
  classes[d] = true;
});

d3.selectAll(".htmlValue")
  .data(function(data) {return d3.keys(data.htmlData);})
  .enter()
  .classed(classes);

---

经过进一步的调查，我发现我的JSON数组的值偏离了1000倍，这就是我的刻度恢复到接近0的原因

对于将标签添加为类，我无法使解决方案起作用，但我决定不需要将其作为类，因此我根据以下内容将其绑定为自定义数据属性：

 var waferList = waferValues.selectAll("div")
    .data(function(data) {return d3.values(data.htmlData);})
    .enter()
    .append("div")
    .attr("class","htmlValue")
    .text(function(data){return data;})
    .data(function(data){return d3.keys(data.htmlData)})
    .attr("data-htmlLabel",function(data){return data});

---

我不确定我错过了什么。我在waferList变量之后添加了以下内容