Question

我需要减少图例矩形（框）和dimple.js中的图例文本之间的间距

这是我的小提琴 - http://jsfiddle.net/keshav_1007/f4warsnu/3/

var yMax = 520; // overriding y axis
        var score=8000/100;
        var svg = dimple.newSvg("#chartContainer", 600, 600);
        var data = [{
            "Brand":"A", 
            "Day":"Mon", 
            "SalesVolume":100 },
            { 
            "Brand":"B", 
            "Day":"Mon", 
            "SalesVolume":200 }];
        var myChart = new dimple.chart(svg, data);

        myChart.setBounds(100, 50, 300, 300)
        var x = myChart.addCategoryAxis("x", "Day");
        var y = myChart.addMeasureAxis("y", "SalesVolume");
        y.overrideMax = yMax;
         y.addOrderRule("SalesVolume");
        var s = myChart.addSeries("Brand", dimple.plot.bar);
        s.barGap=0.7;
        myChart.addLegend(120, 400, 300, 30, "left");

        s.addEventHandler("mouseover", onHover);

        s.addEventHandler("mouseleave", onLeave); 

        myChart.draw();

        d3.selectAll("rect").on("mouseover", null);
        s.shapes.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, s); });
        var defs = svg.append("g");
        defs.append("marker")
        .attr("id", "triangle-start")
        .attr("viewBox", "-5 -5 10 10")
        .attr("refX", -1)
        .attr("refY", 0)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("class", "marker")
        .attr("d", "M 0 0 L 3 4 L 3 -4 z");

         svg.append("line")
        .attr("x1",205)
        .attr("x2", 295)
        .attr("y1", (y._scale(score)))
        .attr("y2",(y._scale(score)))
        .attr('stroke','black')
        .attr("marker-end", "url(#triangle-start)")
        .style("stroke-dasharray", "3");    

var defs1 = svg.append("g");
        defs1.append("marker")
        .attr("id", "triangle-start1")
        .attr("viewBox", "-5 -5 10 10")
        .attr("refX", -1)
        .attr("refY", 0)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("class", "marker")
        .attr("d", "M 0 0 L 3 4 L 3 -4 z");

         svg.append("line")
        .attr("x1",205)
        .attr("x2", 295)
        .attr("y1",200)
        .attr("y2",200)
        .attr('stroke','black')
        .attr("marker-start", "url(#triangle-start1)")
        .style("stroke-dasharray", "3");

        function onHover(e) {
            console.log("on enter");
            var cx = parseFloat(e.selectedShape.attr("x")),
                    cy = parseFloat(e.selectedShape.attr("y"));

                // Set the size and position of the popup
                var width = 150,
                    height = 70,
                    x = (cx + width + 10 < svg.attr("width") ?
                         cx + 10 :
                cx - width - 20);
                    y = (cy - height / 2 < 0 ?
                        15 :
                        cy - height / 2);

                // Create a group for the popup objects
                popup = svg.append("g");

                // Add a rectangle surrounding the text
                popup .append("rect")
                        .attr("x", x + 5)
                        .attr("y", y - 5)
                        .attr("width", 150)
                        .attr("height", height)
                        .attr("rx", 5)
                        .attr("ry", 5)
                        .style("fill", 'white')
                        .style("stroke", 'black')
                        .style("stroke-width", 2);
                // Add multiple lines of text
              var pos1 = d3.select("path").node().getTotalLength();
             console.log(pos1);
            var pos2 = d3.select("path").node().getPointAtLength(312)
                         console.log(pos2);
console.log(pos2.x);
console.log(pos2.y);
        }

        function onLeave(e) {
            console.log("on Leave");
            if (popup !== null) {
                    popup.remove();
                }

        }

我需要缩小图例框和图例文本之间的空格。请让我知道怎么做..

Answer 1

你可以用d3

来做

d3.selectAll('.legendText').attr('x', function(d) {
    return d3.select(this).attr("x") - 2;
});

只需将2更改为其他内容，即可根据需要更改相对位置。

小提琴 - http://jsfiddle.net/pabwyk5d/

如何减少dimple.js中Legend矩和Legend文本之间的间距

1 个答案: