Question

大家好我正在做这个图表，我需要用我在var颜色中的相同颜色填充数据。

在这里，我从实际折线图中截取了一个屏幕截图：

这里是代码：

<html>
    <head>
        <title></title>
        <script src="d3.min.js"></script>
        <style>
            body {
  font: 10px sans-serif;
  margin: 50px;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.axis path {
    fill: none;
    stroke: #bbb;
    shape-rendering: crispEdges;
}

.axis text {
    fill: #555;
}

.axis line {    
    stroke: #e7e7e7;
    shape-rendering: crispEdges;
}

.axis .axis-label {
    font-size: 14px;
}

.line {
    fill: none;
    stroke-width: 1.5px;
}

.dot {

    stroke: transparent;
    stroke-width: 10px;  
    cursor: pointer;
}

.dot:hover {
    stroke: rgba(68, 127, 255, 0.3);
}
        </style>
    </head>
    <body>


    <div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>


    <script>
    var data =  [
    [{'x':0,'y':5},{'x':9,'y':5}, {'x':9,'y':-1}, {'x':12,'y':-1},{'x':12,'y':5}, {'x':17,'y':5}, {'x':17,'y':-1}],
    [{'x':1,'y':-1},{'x':1,'y':1},{'x':6,'y':1},{'x':6,'y':-1} ],
    [{'x':3,'y':-1},{'x':3,'y':3}, {'x':7,'y':3}, {'x':7,'y':-1}]
];

var colors = [
    'green',
    'orange',
    'blue'
]


//************************************************************
// Create Margins and Axis and hook our zoom function
//************************************************************
var margin = {top: 20, right: 30, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, 30])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 16])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(-height)
    .tickPadding(10)    
    .tickSubdivide(true)    
    .orient("bottom");  

var yAxis = d3.svg.axis()
    .scale(y)
    .tickPadding(10)
    .tickSize(-width)
    .tickSubdivide(true)    
    .orient("left");

var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);    





//************************************************************
// Generate our SVG object
//************************************************************  
var svg = d3.select("body").append("svg")
    .call(zoom)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("g")
    .attr("class", "y axis")
    .append("text")
    .attr("class", "axis-label")
    .attr("transform", "rotate(-90)")
    .attr("y", (-margin.left) + 10)
    .attr("x", -height/2)
    .text('KM/H');  

svg.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);





//************************************************************
// Create D3 line object and draw data on our SVG object
//************************************************************
var line = d3.svg.line()
    .interpolate("linear")  
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });     

svg.selectAll('.line')
    .data(data)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("clip-path", "url(#clip)")
    .attr('stroke', function(d,i){          
        return colors[i%colors.length];
    })
    .attr("d", line);       




//************************************************************
// Draw points on SVG object based on the data given
//************************************************************
var points = svg.selectAll('.dots')
    .data(data)
    .enter()
    .append("g")
    .attr("class", "dots")
    .attr("clip-path", "url(#clip)");   

points.selectAll('.dot')
    .data(function(d, index){       
        var a = [];
        d.forEach(function(point,i){
            a.push({'index': index, 'point': point});
        });     
        return a;
    })
    .enter()
    .append('circle')
    .attr('class','dot')
    .attr("r", 2.5)
    .attr('fill', function(d,i){    
        return colors[d.index%colors.length];
    })  
    .attr("transform", function(d) { 
        return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
    );






//************************************************************
// Zoom specific updates
//************************************************************
function zoomed() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);   
    svg.selectAll('path.line').attr('d', line);  

    points.selectAll('circle').attr("transform", function(d) { 
        return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
    );  
}
    </script>



    </body>
</html>

我只需填写图表中的矩形。

但不是所有的行，只是第一个和第二个数组。

我需要这样的结果： I need this result

在这一行我尝试用填充来改变笔划，但这不起作用......我有更多的想法...

svg.selectAll('.line')
    .data(data)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("clip-path", "url(#clip)")
    .attr('stroke', function(d,i){          
        return colors[i%colors.length];
    })
    .attr("d", line);

解决了问题。只是css拖着我......

Answer 1

您想要修改图表。在您的图片中，您使用的是行，但您可能希望使用rect个对象。然后你可以设置一个填充：

d3.select("svg")
  .append("rect")
  .attr({ x: 10, y: 10, height: 50, width: 100})
  .style("fill", "blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="500"></svg>

如果你想保留你的线条/点，那么一定要确保你绘制矩形第一个以确保它在z顺序中更低，因为SVG根据文档中的外观跟踪z顺序

填充线条D3 js

1 个答案: