Question

我已经构建了以下代码，以创建可以在x和y轴图中绘制的客户垂直滑块。

我已经从一个csv文件中获取输入，然后使用它在d3.js中构建以下输出.d3.js中的代码如下：

编辑1：我目前只能仅拖动黄色矩形，而不能拖动所有矩形。 This is how the the modified graph looks like

需要您的建议-

1）如何分别拖动所有矩形 2）保持属于一条线的矩形颜色相同。例如：第一行的所有矩形将具有相同的颜色，第二行的所有矩形将具有另一种颜色，依此类推。

这将有极大的帮助，谢谢！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test Data</title>
    <style>

        div.tooltip {
    position: absolute;
    text-align: center;
    width: 90px;
    height: 32px;
    padding: 1px;
    font: 11px verdana;
    background: rebeccapurple;
    color: white;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }

  .grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
  }

  .grid path {
    stroke-width: 0;
  }
        svg {
  float: left;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  margin-right: -1px;
  margin-bottom: -1px;
}

rect {
  opacity: 0.9;
}

svg {
  float: left;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  margin-right: -1px;
  margin-bottom: -1px;
}

rect {
  opacity: 0.9;
}
    </style>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        function dragstarted(d) {
            d3.event.sourceEvent.stopPropagation();
            d3.select(this).classed("dragging", true);
        }

        function dragged(d) {
            d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
        }

        function dragended(d) {
            d3.select(this).classed("dragging", false);
        }
        // load csv from the same directory
        d3.csv("test.csv", function (data) {

            data.forEach(function (d) {
                x_value: +data.x_value; // convert to number with +
                promotedprice: +data.promotedprice; // convert to number with +   
                nonpromotedprice: +data.nonpromotedprice;
                avgprice: +data.avgprice;
                brand: data.brand;

            });

            var svg = d3.select("body").append("svg")
                .attr("width", 700)
                .attr("height", 450)


            // Attach the Promoted Price Rectangle    
            var g = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("g")
                .classed('rect', true)
                .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
                    .on("end", dragended));


            var accent = d3.scaleOrdinal(d3.schemeAccent);

            /*.call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragend));*/

            /*g.append("rect")
                .attr("width", 18)
                .attr("height", function (d) { return (d.nonpromotedprice - d.promotedprice) + 100; })
                .attr("x", function (d) { return d.x_value; })
                .attr("y", function (d) { return (d.nonpromotedprice - d.promotedprice) / 2; })
                .attr("fill", "#E6EAEE")
            */
            g.append("line")          // attach a line
                .style("stroke", "gray")
                .style("stroke-width", 12)  // colour the line
                .attr("x1", function (d) { return d.x_value; })     // x position of the first end of the line
                .attr("y1", function (d) { return d.nonpromotedprice; })      // y position of the first end of the line
                .attr("x2", function (d) { return d.x_value; })     // x position of the second end of the line
                .attr("y2", function (d) { return d.promotedprice; });


            g.append("rect")
                .attr("width", 20)
                .attr("height", 15)
                .attr("x", function (d) { return d.x_value - 10; })
                .attr("y", function (d) { return d.promotedprice; })
                .attr("fill", "#F9EA55")


            g.append("rect")
                .attr("width", 20)
                .attr("height", 15)
                .attr("x", function (d) { return d.x_value - 10; })
                .attr("y", function (d) { return d.nonpromotedprice; })
                .attr("fill", "#ED8B00")

            g.append("rect")
                .attr("width", 20)
                .attr("height", 15)
                .attr("x", function (d) { return d.x_value - 10; })
                .attr("y", function (d) { return d.avgprice; })
                .attr("fill", "#28468E")
                ;


            g.selectAll("rect")
                .style('cursor', 'pointer');

            g.selectAll("text")
                .data(data)
                .enter()
                .insert("text", "line")
                .text(function (d) { return d.brand; })
                .style("text-anchor", "top")
                .style("fill", "red")
                .style("font-family", "Arial")
                .style("font-size", 34);

            function dragstarted(d) {
                d3.select(this).raise().classed("active", true);
            }

            function dragged(d) {

                d3.select(this).select("rect")
                    //.attr("x", d.x = d3.event.x)
                    .attr("y", d.y = d3.event.y);
            }

            function dragended(d) {
                d3.select(this).classed("active", false);
            }


        });



    </script>
</body>

预先感谢

d3.js无法拖动所有矩形

0 个答案: