Question

对于我的公司，我必须开发绘制种族资料的功能，并添加竞赛检查点。目前，我有这个：

Chart

但是，在这里，我的CP已自动添加到配置文件中。问题是，我想让我们的用户决定他们是否想要在个人资料上显示CP。此外，如果用户不希望这些检查点显示，我想删除这些检查点。我尝试使用复选框，但它没有用。如果您有任何想法或任何建议，我将非常高兴地接受它。

最诚挚的问候，Damien。

所以，有我的CSS：

body {font: 10px sans-serif;}

 .axis path, .axis line {fill: none;  stroke: #000;  shape-rendering: crispEdges;}

.axis text { font-family: Lato; font-size: 13px;}

.grid path, .grid line { fill: none; stroke: rgba(0, 0, 0, 0.25); shape-rendering: crispEdges;}

.area { fill: darkorange;}

.marker.client .marker-bg, .marker.client path {fill: rgba(255, 127, 0, 0.8); stroke: rgba(255, 127, 0, 0.8); stroke-width: 3;}

.marker.server .marker-bg, .marker.server path { fill: rgba(0, 153, 51, 0.8);stroke: rgba(0, 153, 51, 0.8);stroke-width: 3;}

.marker path { fill: none;}

.legend text, .marker text { fill: #fff;font-weight: bold;}

.marker text {text-anchor: middle;}

而且，有我的JS：

function profile(data) {

    var margin = {
        top: 20
        , right: 20
        , bottom: 60
        , left: 50
    }
        , width = 960 - margin.left - margin.right
        , height = 500 - margin.top - margin.bottom
        , innerwidth = width - margin.left - margin.right
        , innerheight = height - margin.top - margin.bottom;

    var x = d3.scaleLinear().range([0, width]);

    var y = d3.scaleLinear().range([height, 0]);

    var xAxis = d3.axisBottom().scale(x);

    var yAxis = d3.axisLeft().scale(y);

    var area = d3.area().x(function (d) {
        return x(d.d);
    }).y0(height).y1(function (d) {
        return y(d.a);
    })

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(data, function (d) {
        return d.d;
    }));

    y.domain([0, d3.max(data, function (d) {
        return d.a;
    })]);

    var x_grid = d3.axisBottom().scale(x).tickSize(-height).tickFormat("");

    var y_grid = d3.axisLeft().scale(y).tickSize(-width).tickFormat("");

    svg.append('svg:path')
        .datum(data)
        .attr("class", "area")
        .attr("d", area)

    svg.append("svg:g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("transform", "translate(0," + margin.top * 2 + ")")
        .attr("x", width - (margin.right + margin.left))
        .text("Distance (km)")

    svg.append("svg:g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6).attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Altitude (m)")

    svg.append("g")
        .attr("class", "x grid")
        .attr("transform", "translate(0," + height + ")")
        .call(x_grid);

    svg.append("g")
        .attr("class", "y grid")
        .call(y_grid);
    d3.json('data.json', function (error, rawData) {
        if (error) {
            console.error(error);
            return;
        }

        var data = rawData.map(function (d) {
            return {
                altitude: d.a,
                distance: d.d
            };
        });

        d3.json('markers.json', function (error, markerData) {
            if (error) {
                console.error(error);
                return;
            }

            var markers = markerData.map(function (marker) {
                return {
                    id: marker.id,
                    name: marker.name,
                    type: marker.type,
                    description: marker.description,
                    icon: marker.icon,
                    distance: marker.distance
                };
            });

            if (document.getElementById("cbox1").checked = true) {
                markers.forEach(function (marker, i) {
                    setTimeout(function () {
                        setItem(marker, svg, innerheight, x);

                    }, 1000 + 500 * i);
                });
            }
            else { //        removeItem(marker, svg, innerheight, x);
                alert("oui");
            }
        });
    });
}
function setItem(marker, svg, innerheight, x) {
    var radius = 20,
        xPos = x(marker.distance) - radius - 3,
        yPosStart = innerheight - radius - 3,
        yPosEnd = (marker.type === 'CP' ? 80 : 160) + radius - 3;

    var markerG = svg.append('g')
        .attr('class', 'marker ' + marker.type.toLowerCase())
        .attr('transform', 'translate(' + xPos + ', ' + yPosStart + ')')
        .attr('opacity', 0);

    markerG.transition()
        .duration(1000)
        .attr('transform', 'translate(' + xPos + ', ' + yPosEnd + ')')
        .attr('opacity', 1);

    markerG.append('path')
        .attr('d', 'M' + radius + ',' + (innerheight - yPosStart) + 'L' + radius + ',' + (innerheight - yPosStart))
        .transition()
        .duration(1000)
        .attr('d', 'M' + radius + ',' + (innerheight - yPosEnd) + 'L' + radius + ',' + (radius * 2));

    markerG.append('circle')
        .attr('class', 'marker-bg')
        .attr('cx', radius)
        .attr('cy', radius)
        .attr('r', radius);

    markerG.append('text')
        .attr('x', radius)
        .attr('y', radius * 0.9)
        .text(marker.type);

    markerG.append('text')
        .attr('x', radius)
        .attr('y', radius * 1.5)
        .text(marker.description);
}

$.ajax({
    url: '/site/raceprofile/profile.json'
    , method: 'GET'
    , success: function (data) {
        console.log("data =", data);
        profile(data);
    }
    , error: function (data) {
        console.log("err" + data)
    }
})

我还使用两个.json文件：的 data.json

[{"d": 1488,"a": 145}, {"d": 1489, "a": 132}, {"d": 1490, "a": 70}, {"d": 1491, "a": 115}, {"d": 1492, "a": 44}, {"d": 1493, "a": 117}, {"d": 1494, "a": 9}, {"d": 1495, "a": 64}, {"d": 1496, "a": 37}, {"d": 1497, "a": 145}, {"d": 1498, "a": 14}, {"d": 1499, "a": 86}, {"d": 1500, "a": 119}, {"d": 1501, "a": 200}, {"d": 1502, "a": 23}, {"d": 1503, "a": 85}, {"d": 1504, "a": 145}, {"d": 1505, "a": 49}, {"d": 1506, "a": 145}, {"d": 1507, "a": 58}]

markers.json

[
{
    "id": "1",
    "name": "Depart - Vielle-Aure",
    "type": "CP",
    "description": "Départ",
    "icon": "../item_icons/iconCust/map-marker-checkpoint.svg",
    "distance": "1488"
  },{
    "id": "2",
    "name": "CP1 - Col de Portet",
    "type": "CP",
    "description": "1er CP",
    "icon": "../item_icons/iconCust/map-marker-checkpoint.svg",
    "distance": "1496"
  },{
    "id": "1",
    "name": "CP2 - Artigues",
    "type": "CP",
    "description": "2ème CP",
    "icon": "../item_icons/iconCust/map-marker-checkpoint.svg",
    "distance": "1504"
  }
]

Answer 1

您似乎需要在复选框上将此if语句更正为：

if (document.getElementById("cbox1").checked === true ) {

但是，这只会在页面加载时检查一次，每次更改复选框时都要更新，添加一个在更改时调用的函数：

d3.select("#cbox1").on("change",update);

function update() {
    if(d3.select("#cbox1").property("checked")){
       // do something
    }
    else {
        // undo something
    }
}

您有两个选项可以在该功能中执行操作。您可以通过使标记更改透明度来隐藏和显示标记，也可以重新生成图形以删除或创建标记。

响应区域图

1 个答案: