Question

我遇到了另外一个问题所以我想我只是发布了完整的功能。在这种情况下，该函数作为JSON关联数组传递，其中嵌入了数组“waferId”“detailWafer”和“htmlData”。我已经能够附加waferId信息，并且仍然无法将htmlData键分配为类（即使建议进行更改）也无法正确绑定detailWafer x和y数据。从值的外观来看，在执行xScale和yScale之后，这些值全部出现在一个大致对应于x和y的0的位置。当我查看JSON中的x和y值（在Firebug中）时，它们不为零。我不确定是否将它们作为+ 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);

}

Answer 1

来自the documentation：

如果你想一次设置多个类，请使用如下对象文字：selection.classed（{＆＃39; foo＆＃39;：true，＆＃39; bar＆＃39;：false}）。< / p>

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

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);

Answer 2

通过进一步的调查，我发现我的JSON数组的值偏差了1000倍，这就是我的尺度回到0附近的原因。

为了将标签添加为类，我无法使解决方案起作用，但我认为我并不是真的需要它成为一个类，所以我将它作为自定义数据属性绑定到以下内容： / p>

 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});

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

2 个答案: