Блог

У меня есть SVG-чертеж d3js, который я делаю следующим образом:

d — это массив, содержащий записи типа

   var d=[{"x":370,"y":40,"label":"Label 1"},    
        {"x":370,"y":150,"label":"Label 2"} ];
  

и код для d3 выглядит так

     // here el is my HTML element and width/height are sizes
    var svg=d3.select(el).append('svg')
    svg.attr({width: width, height: height});

    // this works just fine
            svg.append("circle") // attach a circle
                .attr("cx", 200) // position the x-center
                .attr("cy", 100) // position the y-center
                .attr("r", 50);
    //  now trying to plot that 'd' array

            svg.data(d)
                .enter().append("circle")
                .attr("cy", function (d) {                    
                    return d.y
                })
                .attr("cx", function (d) {

                    return d.x
                })
                .attr("r", 10);
  

последняя инструкция не будет создавать элементы svg. Ошибок тоже не отображается. Функции внутри «cy» / «cx» вызываются нормально. Пожалуйста, дайте мне понять проблему.

К сожалению, мой d3 немного заржавел, но вы, похоже, пропустили selectAll . Вместо этого попробуйте следующее:

 svg.selectAll("*").data(d)
    .enter().append("circle")
    .attr("cy", function (d) {                    
        return d.y
    })
    .attr("cx", function (d) {
        return d.x
    })
    .attr("r", 10);
  

Взгляните на jsFiddle здесь, чтобы увидеть это в действии; из того, что я могу сказать, selectAll используется для фильтрации любых значений, которые могут уже существовать. Даже с "*" помощью селектора CSS никакие значения не совпадают, поэтому используются все элементы из d .